How to populate array with data returned from ajax call?

Question

I'm making a call to an app to fetch data (routes), then looping through that data to fetch additional data about each individual route. The final data will show up in console.log without a problem, but I can't get it into an array.

$.getJSON('http://example-app/api/routes/?callback=?', function(data) {
            var routes = [];

            $(data).each(function(i){
                routes.push(data[i]._id);
            });

            function getRouteData(route, callback) {
                $.ajax({
                    url: 'http://example-app/api/routes/'+route+'?callback=?',
                    dataType: 'json',
                    success: function(data) {
                        callback(data);
                    }
                });
            }

            var route_data = [];

            $(routes).each(function(i) {
                getRouteData(routes[i], function(data) {
                    console.log(data); // this shows me the 13 objects
                    route_data.push(data);
                });
            });

            console.log(route_data); // this is empty

        });

I suspect the `callback=?` is making it into a jsonp request which will always be asynchronous (even though you specified `async:false`)... — nnnnnn, Nov 20 '12 at 03:06
Right, I guess the async: false makes no sense - it is indeed jsonp and must be asynchronous since the request is to an outside site. Edited to remove that line. — chris_mac, Nov 20 '12 at 03:10
So at the line where you've got the "this is empty" comment the async callbacks haven't occurred yet so the array really is empty. You should be able to make use of [jQuery's Deferred](http://api.jquery.com/category/deferred-object/) functionality to do something after all responses have been received. Have a look at [this answer](http://stackoverflow.com/a/6591864/615754) to another question about async Ajax in a loop... — nnnnnn, Nov 20 '12 at 03:15

Beetroot-Beetroot · Accepted Answer · 2012-11-20T07:20:02.013

nnnnnn's right, you have to use Deferreds/promises to ensure that route_data is populated before sending it to the console.

It's not immediately obvious how to do this, with particular regard to the fact that $.when() accepts a series of discrete arguments, not an array.

Another issue is that any individual ajax failure should not scupper the whole enterprise. It is maybe less than obvious how to overcome this.

I'm not 100% certain but something along the following lines should work :

$.getJSON('http://example-app/api/routes/?callback=?', function(data) {
    var route_promises = [];
    var route_data = [];
    function getRouteData(route) {
        var dfrd = $.Deferred();
        $.ajax({
            url: 'http://example-app/api/routes/'+route+'?callback=?',
            dataType: 'json'
        }).done(function(data) {
            //console.log(data); // this shows me the 13 objects
            route_data.push(data);
        }).fail(function() {
            route_data.push("ajax error");
        }).then(function() {
            dfrd.resolve();
        });
        return dfrd.promise();//By returning a promise derived from a Deferred that is fully under our control (as opposed to the $.ajax method's jqXHR object), we can guarantee resolution even if the ajax fails. Thus any number of ajax failures will not cause the whole route_promises collection to fail.
    }
    $(data).each(function(i, route) {
        route_promises.push( getRouteData(route) );
    });
    //$.when doesn't accept an array, but we should be able to use $.when.apply($, ...), where  the first parameter, `$`, is arbitrary.
    $.when.apply($, route_promises).done(function() {
        console.log(route_data);
    });
});

untested

See comments in code.

How to populate array with data returned from ajax call?

1 Answers1