One callback for multiple json requests

Question

I want to make X number of ajax requests in jQuery and add the json response to an array. When all the ajax requests are done, I would like to execute some code. Is there a good way to solve this?

Answer 1

I don't know any way other than counting the requests up and counting them back in manually in your code. Once they're all back and accounted for, execute your master callback.

Answer 2

For each ajax response I would do:

for(var k in json)
  someArray[k]=json[k];

But I'm not sure how looks your json data.

Answer 3

This code should do what you want, all jQuery style. Basically it uses a bit of recursion to get it done. Pass options to the loadmultiples function to set up what you want to do, and JSON responses are pushed onto an array. You could easily change it if you instead wanted to merge the JSON responses into a single structure, but I wasn't sure if that was what you wanted.

var loadmultiples = function(options) {    

    var settings = $.extend({

        //set the url to get
        url : '/response.json',

        //this function is called when everything is done
        callback : function() {},

        //set this option to define how many loads to do
        numbertodo : 10,

        //these two are just used for
        //storing data while we recurse,
        //and keeping track of the current position
        //however you can change them if you want to start
        //from a different point, or have existing data
        numberdone : 0,
        data : []
    }, options || {});

    //load the json, passing up the current 'number'
    //of the content to load
    $.ajax({
        url : settings.url,
        data : { 'number' : settings.numberdone },
        dataType: 'json',        
        success: function(result) {            

            //add the response to the data
            settings.data.push(result);

            //increment the counter of how many files have been done
            settings.numberdone++;

            //
            if(settings.numberdone < settings.numbertoexecute) {
                loadmultiples(settings);
            } else {
                settings.callback(settings.data);
            }

        }        
    });

}

//so now we can call it...
loadmultiples({
    callback: function(data) {
        //this function will get called when all the data calls have been
        //completed, and the resulting data is in the data parameter

    }
});

Answer 4

I did this recently by firing off a bunch of ajax requests, then decrementing a counter as they come in.

It worked fine, but I ended up changing my code from a bunch of small ajax requests to just asking the server for everything at once. A lot fewer requests and less overhead, and a lot more robust.

Unless you have a great reason for making individual requests (some requests are likely to be quick, some slow, and you can offer some meaningful display of information as the pieces come in), I'd lump them all together (assuming you can modify the server code or add new server code).