Multiple ajax calls from array and handle callback when completed

Question

I have used promises in jQuery slightly before - but I am having trouble applying it to this scenario. I prefer to use the $.when() and $.done() methods to achieve this.

From what I understand I need to build a $.Deferred object which logs the requests and when those requests are finished - fire the callback. In my code below the callback is firing before the ajax requests and not after - maybe I just need some sleep

I know my code is incomplete I have been struggling to apply it with the addition of the for loop.

http://jsfiddle.net/whiteb0x/MBZEu/

var list = ['obj1', 'obj2', 'obj3', 'obj4', 'obj5'];
var callback = function() {
  alert("done");
};
var requests = [];

var ajaxFunction = function(obj, successCallback, errorCallback) {
  for(i = 0; i < list.length; i++) {
    $.ajax({
      url: 'url',
      success: function() {
            requests.push(this);
      }
    });
  }
};
$.when($.ajax(), ajaxFunction).then(function(results){callback()});

Look this question to receive all promises like an array stackoverflow.com/a/16208148 — André de Mattos Ferraz
– André de Mattos Ferraz, Commented Mar 14, 2016 at 18:00

Explosion Pills · Accepted Answer · 2013-01-16 05:59:26Z

58

The arguments to $.when should be the return value of $.ajax, which also doesn't need to be called separately -- that makes no sense. You want something like this:

for (i = 0; i < list.length; i++) {
   requests.push($.ajax(...));
}
$.when.apply(undefined, requests).then(...)

The reason that .apply is needed is because $.when can take multiple arguments, but not an array of arguments. .apply expands essentially to:

$.when(requests[0], requests[1], ...)

This also assumes that the requests can be completed in any order.

http://jsfiddle.net/MBZEu/4/ -- notice that 'done' is logged to the console after all of the success messages.

answered Jan 16, 2013 at 5:59

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MK Yung Over a year ago

how to handle all the results at once?

Anthony Graglia Over a year ago

$.when.apply(undefined, requests).done(function(response1, response2, ...){ if(response1[1]=="success") {// DoSomething with response1[0]} });

Prakhar Mishra Over a year ago

Still, how to get all the responses in an array? You cannot expect one to know how many responses are going to be there before hand.

algorhythm Over a year ago

As @MKYung asked, it could be a problem to handle the results... because, if you have just one element in the list of requests you'll got one retuning result in the method done but divided into three parameter jqXHR.done(function( data, textStatus, jqXHR ) { ... });. But with multiple requests you got all the three parameters wrapped in arrays e.g. jqXHR.done(function( [data, textStatus, jqXHR], [data, textStatus, jqXHR], ... ) { ... });. To handle it inside the done method you have to know the count of requests, in this case list.length to decide how to parse the results...

Kanabos · Accepted Answer · 2016-10-10 18:21:17Z

9

I share an easy example that could help you to handle multiple requests and their responses:

var arr = [
    $.ajax({url:"test1.php"}),
    $.ajax({url:"test2.php"}),
    $.ajax({url:"test3.php"})
];
$.when.apply( undefined, arr ).then(function() {
    var objects=arguments;
    console.dir(objects);
});

answered Oct 10, 2016 at 18:21

Kanabos

4204 silver badges11 bronze badges

Collectives™ on Stack Overflow

Multiple ajax calls from array and handle callback when completed

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related