Waiting until AJAX completes inside an $.each loop

Question

I can't seem to get jQuery deferrers to work if they are called from an $.each loop.

var deferreds = [],
    ids = ['1234', '4321'],
    users = [];

$.each(ids, function(i,v){
    deferreds.push(
        $.getJSON('api/users/'+v, function(i,v){
            users.push(v.username);
        })
    );
});

$.when($, deferreds).done(function(){
    console.log(users);
});

Answer 1

The problem is the use of when.

In particular, the usage is missing an apply - so it is "waiting on" $ and the deferreds array (which will "resolve" immediately), not each deferred.

Compare with:

$.when.apply($, deferreds).done..

Answer 2

I thought I would link to my answer here on a very similar thread regarding ajax calls within an each loop.

Unlike the OP's code, this method is a little more complex showing how to await the 'successes' back up through a couple of function calls and I think would be useful for many people encountering the ajax/each issue.