CODEWITHSUNDEEP
javascriptjqueryarraysajax
Lee
Lee

Reputation: 1495

Collect AJAX results in order

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.

Upvotes: 6

Views: 1379

Answers (5)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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');
});

Upvotes: 7

Florent Descroix
Florent Descroix

Reputation: 611

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.

Upvotes: 1

Jaromanda X
Jaromanda X

Reputation: 1

Building on @Christo's answer - using arrays map function

var array_of_results = [];
var requests = myarray.map(function(item, index) {
    return $.ajax({
        url: 'anotherurl?=' + item,
        dataType: "JSONP",
        success: function (data) {
            array_of_results[index] = data;
        }
    }
});

...

Upvotes: -1

Aditya Duvvuri
Aditya Duvvuri

Reputation: 91

How about using jquery.ajax call with async setting as false. This way the reaponse will be in order as requested...

Upvotes: -1

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

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!");
        }
    });
}

Upvotes: 1

Related Questions