.When() and .done() using an array with .done

Question

I am writing a google content script and my program needs to make roughly 30 AJAX calls to the server. I am using JQuery\'s .when function in conjunction with .apply to pas

Answer 1

If you look at the examples for $.when, you see that the call back gets passed an argument for each promise. If that promise came from an Ajax call, then each argument is an array of the form [ data, statusText, jqXHR ].

So you you just have iterate over the arguments and extract the first element. $.map makes that very easy:

$.when.apply($, requests)
  .then(function() {
    return $.map(arguments, function(v) {
      return v[0];
    });
  })
  .done(callback);

Answer 2

I'm fairly new to the deferred stuff (and jQuery in general), but my helper function below seems to work. None of the requests depend on each other for data. I'll probably write a similar helper function to handle chained requests, which will have to use .then().

function sendRequests(requests, callbacks) {
    $.when(...requests).done(function(...results) {
            results.forEach(function(result, index) {
                    callbacks[index](JSON.parse(result[0]));
        });
    });
}

function req1Callback(data) {
    // do something with data object
}

var req1 = $.get(), // arguments omitted
    req2 = $.get(),
    req3 = $.get();

sendRequests([ req1, req2, req3 ], [ req1Callback, req2Callback, req3Callback ]);

Answer 3

Are you looking to put the ajax responses in an array and have a callback execute when all the ajax calls have returned? You can actually get such an array from the arguments passed to .done().

According to the documentation for $.when:

1. If you call .done() on the Promise returned by $.when when it is passed a single ajax request Deferred, the first argument to the callback function will be the response data.
2. If you call .done() on the Promise returned by $.when when it is passed multiple ajax request Deferreds, "the arguments will be the jqXHR objects for the requests, in the order they were given in the argument list." That statement appears to be a bit inaccurate, however, because a comment in the example states: "Each argument is an array with the following structure: [ data, statusText, jqXHR ]."

Therefore you could try:

var requests = $.map(liclass, function(url) {
    return $.ajax(url);
});

$.when.apply($, requests).done(function() {
    var results = (requests.length > 1)
        ? $.map(arguments, function(a) { return a[0]; })
        : [arguments[0]];
    console.log(results);
});

Demo on JSFiddle