jQuery - Concatenating the results of an unknown number of Ajax requests

Question

This could either be very simple or quite complex I'm not sure at this point.

I'm writing a little web-app that will do a cinema schedule based on the Cineworld API.

I'm pulling back the data using AJAX and that's fine, but I've got to the point where I want to get all the times for all of the selected films and then go on to manipulate them later, but combining all the results is proving a bit of a problem.

The resulting API call can only be done on a single film, so I have to pull back the data for each film in turn.

You can see the current, very early, state of the app here: http://www.lewishowles.co.uk/film/

And the main guts is in this file: http://www.lewishowles.co.uk/film/js/lh.js

Lines 42 and 206 are my issues. 42 always logs an empty array, but if I log the array down by 206 each time, it's fine. Logging obviously isn't going to help me much though. It looks like the log on 42 isn't waiting for all of the code in the functions above it to finish.

As you can see I've tried a global array, I've tried returning values but it still seems to be running the log too quickly.

Deferred seems like it would usually be the case, but there will be a different number of ajax calls each time and it seems like you need to know how many to use Deferred.

Setting async to false stopped them tripping over each other, but that's not helping this situation.

Two things I can think of are using Session Storage or hiding the results of each loop in HTML somewhere that I'll then have to access later, but both of those seem like they'll be prone to the same issues.

Another idea is to have another button to press so that the data has time to load, but that adds another step and isn't ideal.

Any ideas?

Answer 1

If you want to fire off a number of ajax calls and then know when they have all completed, there are a number of ways to do that.

The simplest is to just keep a counter of how many ajax calls are in-flight. Then, when each one finishes, you decrement the counter (in the success handler) and if the counter gets to zero, you call the function that you want to execute when all the data is available.

In pseudo-code, it could work like this for asychronous ajax calls:

function runAjaxRequests(listOfRequests) {
    var ajaxCntr = listOfRequests.length;
    var ajaxResults = [];

    // fire off all the ajax requests
    for (var i = 0; i < listOfRequests.length; i++) {
        $.ajax(..., function(data) {
            // ajax success handler

            // store data returned from this request into ajaxResults
            ajaxResults.push(...);

            // see if all ajax requests are now done
            --ajaxCntr;
            if (ajaxCntr == 0) {
                // all data has been returned, we can process it now
                processAllAjaxData(ajaxResults);
            }
        })
    }
}

Answer 2

I had a similar use case. And I achieved it by making async:false and appending every result in a parent variable. Check out below code.

            fileArr = ['1.csv', '2.csv']
            var csvObjArr = []
            for (var i in fileArr) {
                $.ajax({
                    type : "GET",
                    url : _default_base_dir + fileArr[i],
                    dataType : "text",
                    async: false,
                    success : function(data) {
                        // Appending every results in csvObjArr
                        csvObjArr = csvObjArr.concat($.csv.toObjects(data));
                    }
                }); 
            }
            //At this point all ajax are completed
            processData(csvObjArr)

WARNING This code will make ajax call one after another. You need to take it into consideration as it might slow down things unnecessary. HTH