We Keep Coding

JavaScript offset/pagination issue

I am calling to my local API and trying to do it in a pagination style. I have n pictures that I want divided over n / 4 rows (4 pictures per row).
So therefor, I am calling to my API, images/count,offset. But somehow I keep on getting the same results in console.log, namely the first four images.
$(document).ready(function() {
var offset = 0;
var timesToRun = $('.container').data('rows');
var images = [];
for(var i = 1; i <= timesToRun; i++) {
$.ajax('http://192.168.10.11/images/4,' + offset, {
error: function(err) {
console.log(err);
},
method: 'GET',
success: function(data) {
console.log('http://192.168.10.11/images/4,' + offset);
offset = offset + 4;
var currentSet = [];
currentSet.push(data);
console.log(currentSet);
}
});
}
});
In Laravel I am pulling the number of images like so:
public function selectWithOffset($count, $offset)
{
$selectionOfImages = \DB::table('images')->skip($offset)->take($count)->get();
return response()->json($selectionOfImages);
}
When I click the links I do receive the expected response.
What might go wrong here?

The problem is within your JavaScript. $.ajax is asynchronous by default.
The for loop will complete before any success callback of $.ajax is called, and this is the place where you increase the offset.
You have to options to fix this:
1. Make $.ajax synchronous
Add async: false to the $.ajax options.
$.ajax('http://192.168.10.11/images/4,' + offset, {
error: function(err) {
console.log(err);
},
async: false,
method: 'GET',
success: function(data) {
// ...
}
});
2. Increment offset outside of the success callback
for(var i = 1; i <= timesToRun; i++) {
$.ajax('http://192.168.10.11/images/4,' + offset, {
// ...
});
// Increment offset
offset += 4;
}

Clean way to make Subsequent AJAX Calls to API based on Data

So I have a conceptual question regarding the cleanest way to make subsequent AJAX calls to an API based on the returned data.
A quick example:
A function, which encompasses the call would look like this:
function makeCall(headers, min, max) {
$.ajax({
headers: headers,
url: "https://coolapi.com/data?begIndex" + min + "&endIndex=" + max + "&begTimestamp=1404198000000&endTimestamp=1409554800000",
type: "GET",
dataType: 'JSON'
});
}
makeCall(headers, 0, 20);
The beg / end index (min/max), determine the amount of data I'll get back in the array. The API will only return a maximum of 20 items in the array, but it will also return me a COUNT of how many items total exist in that array. An example of the data returned is below:
{
count = 133;
result = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
}
So my next call would be:
makeCall(headers, 20, 40);
and so on so forth, until I got all 133 items from the array.
The question is...what is the cleanest way to continue to make subsequent calls until I've gotten and stored all 133 items from the array? Given that the count could be any number, it's hard to imagine how I can do this. I was thinking of nesting more ajax calls in a "success" function, but it's not scalable if I get back a number like 300.
Does anyone have any advice on how to proceed?
Thanks in advance!
EDIT:
So based on the advice in the comment, I've attemped to make the call recursive--but it doesn't seem to function as intended:
var theData = [];
var minCounter=0;
var maxCounter= minCounter + 20;
function makeCall(headers, min, max) {
$.ajax({
headers: headers,
url: "https://coolapi.com/data?begIndex" + min + "&endIndex=" + max + "&begTimestamp=1404198000000&endTimestamp=1409554800000",
type: "GET",
dataType: 'JSON',
success: function (data) {
theData.push(data.result);
newMin = minCounter + 20;
if (data.count >= theData.length ) {
makeCall(headers, newMin, maxCounter);
}
}
});
}
makeCall(headers, minCounter, maxCounter);
How do properly increment the variable as well as set the flag?
SECOND EDIT:
The method below works using the second comment's suggestion, but there are some issues here as well...
function doAjax(headers, min, dObject) {
var max = min + 20;
$.ajax({
headers: headers,
url: "https://coolapi.com/data?begIndex" + min + "&endIndex=" + max + "&begTimestamp=1404198000000&endTimestamp=1409554800000",
type: "GET",
dataType: 'JSON',
success: function (data) {
results.push(data);
window.count = data.count;
dObject.resolve();
}
});
}
// array that will contain all deferred objects
var deferreds = [];
// array that will contain all results
var results = [];
// make the ajax calls
for (var i = 20; i < 133 ; i+= 20) {
var dObject = new $.Deferred();
deferreds.push(dObject);
doAjax(headers, i, dObject);
}
// check if all ajax calls have finished
$.when.apply($, deferreds).done(function() {
console.log(results);
});
var dObject = new $.Deferred();
doAjax(headers,0, dObject);
First, the data doesn't push to the array in order. There doesn't seem anyway to fix this. Also strangely enough, in the for loop--I have to set the number for it to actually work. Trying to store it in a variable doesn't seem to work as well...Suggestions here?

Here's a working implementation based around the code you started with. Code is commented to help you understand what is happening:
// Change these constants to suit your purposes.
var API_URL = 'https://coolapi.com/data';
var HEADERS = {};
var API_RESULTS_PER_REQUEST = 20;
var MAX_API_CALLS = 20;
// Count API calls to trigger MAX_API_CALLS safety lock.
var apiCalls = 0;
// Function we'll call to get all our data (see bottom).
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;
}
// Makes individual AJAX call to API
function callApi(params, headers) {
var $request = jQuery.ajax({
url: API_URL,
headers: headers,
data: params,
type: 'GET',
dataType: 'JSON'
});
return $request;
}
// Recursive function that makes API calls until data is collected, there is an
// error, or MAX_API_CALLS limit is hit.
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);
apiCalls += 1;
// Callback once API request has completed and data is ready
jQuery.when(apiRequest).done(function(data) {
var apiResultCount = data.count;
resultsFetched = resultsFetched.concat(data.result);
console.debug('Fetched', resultsFetched.length, 'of', apiResultCount, 'API results');
if ( apiResultCount > resultsFetched.length ) {
console.debug('Making another API call');
requestDatasets(params, resultsReady, resultsFetched);
}
else {
console.debug('Results all fetched!');
resultsReady.resolve(resultsFetched);
}
});
jQuery.when(apiRequest).fail(function(data) {
console.error('API error: returning current results.');
resultsReady.resolve(resultsFetched);
});
return resultsReady;
}
// Run script
var dataReady = collectApiData('1404198000000', '1409554800000');
jQuery.when(dataReady).then(function(data) {
console.log(data);
});
Here's a working fiddle that mocks the API using httpbin.org:
http://jsfiddle.net/klenwell/mfhLxun2/

JQuery won't pass data labeled sessid when calling drupal service module

Hey all I am working on a json call that will implement Drupal's services module with json. I am using jquery's ajax function to call the function but I am getting an error stating that no parameters are being passed. When I look at the query string being posted I notice that sessid is not being passed even though its with the parameters. Below is what Im running.
// JavaScript Document
$(document).ready(function() {
function drupalConnect(src) {
$.ajax({
url: src,
type: 'POST',
data: {
method: 'system.connect'
},
success: function(data) {
return data["result"]["sessid"];
}
});
}
function getTimestamp() {
return Math.round((new Date).getTime() / 1000);
}
function randString(length) {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var randomstring = '';
for (var i = 0; i < length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum, rnum + 1);
}
return randomstring;
}
var session_id = drupalConnect('http://localhost/drupal/services/json-rpc');
var nonce = randString(10);
var timestamp = getTimestamp();
var username = "markusgray";
var password = "Markus1990";
var key = '2ae0392e0aebbfeeddefcc962ea1924f';
var domain = 'localhost';
var hashObj = new jsSHA(timestamp + ";" + domain + ";" + nonce + ";user.login", "TEXT");
var hash = hashObj.getHMAC(key, "TEXT", "SHA-256", "HEX");
var parameters = {
hash: hash,
domain_name: domain,
domain_time_stamp: timestamp,
nonce: nonce,
sessid: session_id,
username: username,
password: password
};
var par = JSON.stringify(parameters);
$.ajax({
url: 'http://localhost/drupal/services/json-rpc',
type: 'POST',
dataType: 'json',
data: {
method: 'user.login',
params: par
},
success: function() {
}
});
});​

drupalConnect doesn't return anything, also the return from the success callback is just thrown away. The best way to use the data returned from an ajax call is to use it in thee callback itself.
function drupalConnect(src){
$.ajax({
url: src,
type: 'POST',
data:{method:'system.connect'},
success: function(data){
var session_id = data["result"]["sessid"];
//use session_id here
}
});
}

It is because of the Asynchronous ajax, let me elaborate, to get the session_id you are making an ajax call. At the moment it will send the request, but it wont ensure that the session_id will be assigned at that moment. Hence when you making the second ajax call, the session_id may not be assigned for a value.
There are two workarounds for this,
One is, making the first ajax call with an option async:false and assign the value within the success call, something like
var session_id;
function drupalConnect(src) {
$.ajax({
url: src,
type: 'post',
async : false,
data: {
method: 'system.connect'
},
success: function(data) {
session_id = data["result"]["sessid"];
}
});
};
DEMO
The second one and preferred way is, use of deferred objects, something like
$.when(
// make your first ajax request
).then(function(data) {
session_id = data["result"]["sessid"];
// make your second ajax call
});​
DEMO

How do I pass a variable inside of an ajax call which is inside of a for loop (javascript)?

Working with an api and I need to one of the first responses alongside with the second response in order to serve up a new page. The problem I'm facing is that my variable $x is always set to whatever the last # is in the loop, ie 103 in this specific case. Here is my code:
$.ajax({
dataType: 'text',
type: 'post',
url: 'getAllMessages.php',
success: function(responseData) {
var newString = responseData;
var newerString = newString.substring(0, newString.length - 1);
$newObject = jQuery.parseJSON(newerString);
//console.log($newObject);
for($x = 0; $x < $newObject.messages.length; $x++){
$.ajax({
data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
dataType: 'text',
type: 'post',
url: 'testapi.php',
success: function(responseData2){
//alert($x);
var newString2 = responseData2;
var newerString2 = newString2.substring(0, newString2.length - 1);
$newObject2 = jQuery.parseJSON(newerString2);
if($newObject2.statistics.delivered > 1000){
console.log($newObject.messages[$x]);
console.log($newObject2);
}
},
error: function(responseData2){
alert('failure in testapi.php');
}
});
}
},
error: function(responseData) {
alert('failure in getAllMessages.php');
}
});

My intuition says nesting the Ajax call inside another functional scope (correction thanks to Matt) will resolve the unexpected behavior. I got burned by this already Object creation in loop broken; unrolled works
Also here, example #5: http://www.javascriptkit.com/javatutors/closures2.shtml
Following the pattern given by Engineer,
for($x = 0; $x < $newObject.messages.length; $x++){
(function($x) {
$.ajax({
data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
dataType: 'text',
type: 'post',
url: 'testapi.php',
success: function(responseData2){
alert($x);
var newString2 = responseData2;
var newerString2 = newString2.substring(0, newString2.length - 1);
$newObject2 = jQuery.parseJSON(newerString2);
if($newObject2.statistics.delivered > 1000){
console.log($newObject.messages[1]);
console.log($newObject2);
}
},
error: function(responseData2){
alert('failure in testapi.php');
}
});
})($x);
}

What you're experiencing is closure. When the loop spins round, the value for $x is updated. However, when the ajax function comes to grab it - it's using a reference. So as you find, you end up with the last value.
Try and think more functional? What are you trying to do? Let's say you're trying to postMessage - wrap that in a function and pass in the message.
Your code will become easier to read, and you won't get your variables mangled.
I was about to throw out some code, but noticed something I wanted to clarify - you're using the index in both loops to get a single message from a messages array, yet the POST to testapi.php seems to be working on a single message? What kind of response is expected from that?
 Update: Created jsFiddle to Demo Problem
Here you go here's some code to help you out.
function correctOutputPlox(id) {
setTimeout(function() {
$("#output").append("<li>" + id + "</li>");
}, 500);
}
function runNicely() {
// same loop...
for (var x = 0; x < 10; x++) {
// but rather than use 'x' (which is going to change, we pass it's value into a function which doesn't have access to the original 'x' since it's in a different lexical scope.
correctOutputPlox(x);
}
}
function showProblem() {
for (var x = 0; x < 10; x++) {
setTimeout(function() {
$("#output").append("<li>" + x + "</li>");
}, 500);
}
}
showProblem();
runNicely();

Do while javascript issue

I'm trying to send multiple post within a do while loop but the result is not added
<script type="text/javascript">
function action() {
var initval = 1;
var endval = 5;
do {
var action_string = 'txtuser=someone';
$.ajax({
type: "POST",
url: "http://localhost/js.php",
data: action_string,
success: function(result){
$('div#append_result').append(initval + ',<br/>');
}
});
initval++;
} while (initval <= endval);
}
</script>
The Output is:
5,
5,
5,
5,
5,
and I need the output to be:
1,
2,
3,
4,
5,

Due to the async nature of AJAX, by the time your success function runs for any of the resulting AJAX requests, the loop has completed and initval is set to 5. You need to capture the state of initval at the start of each request and use that captured state in the success() method. Closing over the value is the simplest way to do it:
function action() {
var initval = 1;
var endval = 5;
do {
var action_string = 'txtuser=someone';
( function( captured_initval ){
$.ajax({
type: "POST",
url: "http://localhost/js.php",
data: action_string,
success: function(result){
$('div#append_result').append(captured_initval + ',<br/>');
}
});
}( initval ) );
initval++;
} while (initval <= endval);
}
Understand, though, that one or more requests could get hung up at the server allowing a latter request to complete first, which could result in 1, 2, 5, 3, 4 or something like that.
Also, using an element's ID is much faster than prefixing the hash selector with the elements tag name. Plus you should avoid re-querying the DOM for your result DIV every time the success runs. Grab it once and use it when needed:
function action() {
var initval = 1;
var endval = 5;
do {
var action_string = 'txtuser=someone',
$AppendResult = $('#append_result');
( function( captured_initval ){
$.ajax({
type: "POST",
url: "http://localhost/js.php",
data: action_string,
success: function(result){
$AppendResult.append(captured_initval + ',<br/>');
}
});
}( initval ) );
initval++;
} while (initval <= endval);
}

The Ajax request is asynchronous, which means by the time the success handler returns, the loop is already completed. Instead, you can create a closure to preserve the value:
success: (function(i){
return function() {
$('div#append_result').append(i + ',<br/>');
}
})(initval)

This is because of the async behavior of ajax:
Here is a modified version:
var initval = 1;
var endval = 5;
function action(){
var action_string = 'txtuser=someone';
$.ajax({
type: "POST",
url: "http://localhost/js.php",
data: action_string,
success: function(result){
$('div#append_result').append(initval + ',<br/>');
initval++;
if(initval<=endval)
action();
}
});
}
This is now somewhat a sequential approach.
Note: I assumed every ajax request returns success, if there is an error, you should handle them on the error callback.