passing data from .when to .then in jQuery

Question

I'm trying to use a .when with an .each to loop through some elements and .then do something with the results. But I'm not sure how to store the results from the .when to use in the .then.

for example

var widget_data = [];

$.when(
    $.each(widget_ids, function(index, widget_id){
        $.get('/widget/' + widget_id, function(data){
            widget_data.push(data);
        });
    })
)
    .then(function(){
        console.log(widget_data);
    });

The widget_data array is empty after running.

I see the XHR requests happen after the console.log, and widget_data is empty — waspinator
– waspinator, Commented Jan 25, 2016 at 3:57
Keep a console.log(data) inside $.get and see whether you are getting data there — Guruprasad J Rao
– Guruprasad J Rao, Commented Jan 25, 2016 at 4:00
console.log(data) inside the .when works and shows the resulting data. it seems .then is run right away without waiting for the .when to finish. — waspinator
– waspinator, Commented Jan 25, 2016 at 4:03

Arun P Johny · Accepted Answer · 2016-01-25 04:11:42Z

1

You need to use .map() not .each()

var widget_data = [];
$.when.apply($,
    $.map(widget_ids, function(widget_id, index) {
      return $.get('/widget/' + widget_id, function(data) {
        widget_data.push(data);
      });
    })
  )
  .then(function() {
    console.log(widget_data);
  });

When you use .each(), it returns the array which was passed to it, since it is not an promise object, $.when() will consider it as resolved and will call the then handler without waiting for the ajax requests to complete.

You can use $.map() to create an array of promise objects from the source array, which can be passed to $.when() as above, in that case the then handler will be called only after all the requests are completed - but note that the order of values in the result array may not match the order of items in the source array.

edited Jan 25, 2016 at 4:11

answered Jan 25, 2016 at 4:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

waspinator Over a year ago

Thanks! that worked great. Any thoughts on Gaby's solution? seems to produce the same results.

Arun P Johny Over a year ago

@waspinator thet are the same, only the apis used to create the promise array is different

Gabriele Petrioli · Accepted Answer · 2016-01-25 04:06:45Z

1

One issue is that when needs to get deferered as a parameter(s), and $.each does not return one.

var promises = [];
$.each(widget_ids, function(index, widget_id){
    promises.push( $.get('/widget/' + widget_id, function(data){
        widget_data.push(data);
    }) );
});

$.when.apply($, promises);
 .then(function(){
    console.log(widget_data);
});

answered Jan 25, 2016 at 4:06

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

waspinator Over a year ago

Thanks! both yours and Arun's solutions work. Any thoughts on his?

Collectives™ on Stack Overflow

passing data from .when to .then in jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related