I’m working with Edamam API and I was able to load the first page. Now I’d like to load the next page.
I’ve tried the infinite scroll but it is loading the same first-page result.
This is my AJAX;
ajax: {
theme: 'bootstrap',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "{{ route('searchFoodAPI') }}",
type: "post",
dataType: 'json',
data: function (params) {
return {
search: params.term,
page: params.page
};
},
processResults: function (response, params) {
params.page = params.page || 1;
return {
results: response.results,
pagination: {
more: params.page
}
};
},
cache: true
},
placeholder: 'Search for Ingredient',
minimumInputLength: 2,
});
And the JSON response provided this “_links” object.
"_links" => array:1 [
"next" => array:2 [
"title" => "Next page"
"href" => "https://api.edamam.com/api/food-database/v2/parser?session=44&ingr=oil&app_id=******&app_key=******&nutrition-type=cooking"
]
]
And here’s my Controller.
if ($response->getStatusCode() == '200') {
$data = (string) $response->getBody();
$decoded_json = json_decode($data, true);
$hints = $decoded_json['hints'];
$links = $decoded_json['_links'];
$link = $links['next']['href'];
$responseArray = array();
foreach ($hints as $hint) {
$responseArray[] = array(
"id" => $hint['food']['foodId'],
"text" => $hint['food']['label']
);
}
$results = array(
"results" => $responseArray,
"page" => $link
);
return response()->json($results);
}
I’ve checked Select2 documentation and found nothing using the specified URL provided by JSON response.
Is there any way to add a button for “PREV” and “NEXT”? In these buttons, I can easily assign the target URL. But if yes, how to initialize the results without reloading the page?