StackOverflow Question: AJAX request for paginated API data
http://stackoverflow.com/q/25211366/1093087
HTML
<p>API Calls: <span class="api-calls">0</span></p>
<p>Results Collected: <span class="results-collected">0</span></p>
<h5>open console for additional debug information</h5>
JavaScript
// Constants
var API_URL = 'http://httpbin.org/get';
var HEADERS = {};
var API_RESULTS_PER_REQUEST = 20;
// API safety lock
var MAX_API_CALLS = 5;
var apiCalls = 0;
function callApi(params, headers) {
apiCalls += 1;
$('span.api-calls').text(apiCalls);
var $request = jQuery.ajax({
url: API_URL,
headers: headers,
data: params,
type: 'GET',
dataType: 'JSON'
});
return $request;
}
function collectApiData(begTimestamp, endTimestamp) {
var dataReady = jQuery.Deferred();
var params = {
'begTimestamp': begTimestamp,
'endTimestamp': endTimestamp
};
var datasetsCollected = requestDatasets(params);
jQuery.when(datasetsCollected).then(function(data) {
dataReady.resolve(data);
});
return dataReady;
}
function requestDatasets(params, resultsReady, resultsFetched) {
resultsReady = ( resultsReady !== undefined ) ? resultsReady : jQuery.Deferred();
resultsFetched = ( resultsFetched !== undefined ) ? resultsFetched : [];
// Trigger safety to avoid API abuse
if ( apiCalls >= MAX_API_CALLS ) {
console.error('Exceeded max API calls:', MAX_API_CALLS);
resultsReady.resolve(resultsFetched);
}
// Set index data
params.begIndex = resultsFetched.length;
params.endIndex = resultsFetched.length + API_RESULTS_PER_REQUEST;
// Request dataset from API
var apiRequest = callApi(params, HEADERS);
jQuery.when(apiRequest).done(function(data) {
// This code added to mock data returned by API using httpbin.org. Remove this
// line from actual implementation
data = mockData(params);
var apiResultCount = data.count;
resultsFetched = resultsFetched.concat(data.result);
$('span.results-collected').text(resultsFetched.length);
console.debug('Fetched', resultsFetched.length, 'of', apiResultCount, 'API results');
if ( kk > resultsFetched.length ) {
console.debug('Making another API call');
requestDatasets(params, resultsReady,...