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

        });

Answer 1

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.