Collect AJAX results in order

Question

I have an array of values (myarray), that I want to iterate through and run an AJAX request on each iteration. I've put each ajax request inside another array (requests), so that I can call an alert when all AJAX requests have completed:

Like so:

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP",
        success: function (data) {
          array_of_results.push(data);
        }
    }));
}
$.when.apply($, requests).done(function() {
    alert('complete');
});

All the results are collected in array_of_results. However due to the AJAX requests taking different lengths of time to complete, this array doesn't have the results in the original order.

Is there any way to order this array?

I hope I've made sense. I appreciate this is quite convoluted.

Answer 1

Have you tried the following? I think this should work. All the responses should be available, in order, in the success function of the when().

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP"
    }));
}
$.when.apply($, requests).done(function() {
    array_of_results = arguments;
    alert('complete');
});

Answer 2

Instead of using a loop consider using recursion. Here's a complete example:

var myArray = [
    "somevalue",
    "some other value",
    "another value"
];
var i = myArray.length;
var responses = [];

function doRequests(){
    i--;
    $.ajax({
        url: "myurl.php",
        data: {paramname: myArray[i]}
    }).done(function(response){
        responses.push(response);
        if(i>0) doRequests();
        else{
            // all requests sent.. do stuff
            // responses array is in order
            console.log(responses);
            alert("all done!");
        }
    });
}

Answer 3

You can add a custom attribute to your $.ajax object, setted to your i var.

var requests = [];
for (i = 0; i < myarray.length; ++i) {
    requests.push($.ajax({
        url: 'anotherurl?=' + myarray[i],
        dataType: "JSONP",
        myCustomIndex: i,
        success: function (data) {
          array_of_results[this.myCustomIndex] = data;
        }
    }));
}
$.when.apply($, requests).done(function() {
    alert('complete');
});

JavaScript is really permisive, if you attribute a value to an array out of its bounds (higher than 0), the size of the array will be automaticaly set to the right amount.