Question

I have the following parameters:

a = [{param:'a'}, {param:'b'}, {param:'c'}]

I’d like to make a get request for each parameter, like this:

a.map(function(ai){return $.get('myapi/get?ai='+ai.param)})

How do I do something once all the get requests have finished?

I have tried using $.when, like this:

$.when(
    a.map(function(ai){return $.get('myapi/get?ai='+ai)})
)
.done(function(results){
    results.forEach(function(ri, i){
        ri.success(function(result){
            a[i].result = result
        }
    }
    do_something_with(a)
}

unfortunately I am clearly misunderstanding this $.when().done() idiom as when I call do_something_with(a) I don’t have the new .result attribute. I’m guessing it’s because when is seeing a single array and so just passes straight into the .done(), as opposed to waiting for each component get to finish.

Any help would be appreciated!

Answer 1

You need:

$.when.apply($, myArray);

i.e. using Function.apply to call $.when() with this === $ and the rest of the arguments being the contents of the array myArray, where that array contains the deferred objects returned by each call to $.get.

---

To answer the second question from your comments, you could pass your array of deferred objects through this map function, which returns a new array of deferred objects which will be resolved at completion of each AJAX call, regardless of whether it succeeded or not.

var alwaysDef = def.map(function(old) {
    var def = $.Deferred();
    old.always(def.resolve);
    return def;
});

Note that I’m not sure what parameters (if any) will end up being passed to the final .done function in this instance.

If that matters, the deferred objects are always called in order, so you can register a .done handler for each of the original promises that stores the AJAX results in an array for later use, and a .fail handler that stores a null value instead.

That will ensure that your final .when handler isn’t invoked until after each of the individual results are available to you.