when multiple ajax calls done

.when, jquery, jquery-deferred

Solution

Since you are a dynamic number of requests, try

var masterData = {};
var tableNames = ['table1', 'table2', 'table3', 'table4', 'table5', 'table6'];
var pullSqlData = function () {
    var requests = [];
    tableNames.forEach(function (value) {
        if (storage.isEmpty(value)) {
            var xhr = $.getJSON('http://domain.com?r=appsync/read&id=' + value + "&callback=", function (data) {
                masterData[value] = data;
                storage.set(value, data);
            });
            requests.push(xhr)
        } else {
            masterData[value] = storage.get(value);
        }
    });
    return requests;
};

$.when.apply($, pullSqlData()).done(function () {
    console.log('all done');
});

You need to pass all the ajax requests to `$.when()` so `pullSqlData` has to return the list of ajax requests created by it. Also $.when() does not take an array as an arguments so you need to use Function.apply() to pass the variable number of parameters to it

Problem

Following is the scenario which doesn't work in the order I want: ``` var masterData = {}; var tableNames = ['table1','table2','table3','table4','table5','table6']; var pullSqlData = function(){ tableNames.forEach(function(value) { if(storage.isEmpty(value)) { $.getJSON('http://domain.com?r=appsync/read&id='+value+ "&callback=", function(data){ masterData[value] = data; storage.set(value,data); }); } else { masterData[value] = storage.get(value); } }); }; $.when(pullSqlData()).done(function(){ console.log('all done'); }); ``` After searching around I know I can get above to work if I manually do something like ``` $.when( $.getJSON('http://domain.com?r=appsync/read&id=table1&callback=', function(data){ masterData[value] = data; storage.set(value,data); }), $.getJSON('http://domain.com?r=appsync/read&id=table2&callback=', function(data){ masterData[value] = data; storage.set(value,data); }), //more calls ).done(function(){ console.log('all done'); }); ``` However I was wondering if there is a way of doing above the proper way *storage is a HTML5 localStorage jQuery plugin

Original source