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

user2864740 · Accepted Answer · 2014-01-28T01:00:43.713

3

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..

edited Jan 28 '14 at 01:00

answered Jan 28 '14 at 00:55

user2864740

60,010
15
145
220

That was it! Thanks for the quick response. – matthoiland Jan 28 '14 at 01:02
@matthoiland You're welcome. I've been bit by this before - it's easy to remember after that! – user2864740 Jan 28 '14 at 01:02

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

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.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 28 '17 at 10:38

Cameron Forward

702
8
16

Waiting until AJAX completes inside an $.each loop

2 Answers2