JavaScript/JQuery: Correct passing of local variables from a loop to anonymous ajax callback function?

Question

Hello there I have the following problem - within a loop I have a certain number of jQuery ajax calls - in the return of the ajax call I want to use a local variable as well as the data returned by the ajax call:

In the JavaScript class DOCache.class.js (note that I use the global variable doCache here, which also does not "feel clean" but I do not know how to pass "this"):

 function DOCache() {
    this.cache = new Array();
    this.capi = new JsonAPI();

        // loads all the properties saved in the cache object
         this.loadUpdateCache = function(allLoaded) {
             for(var prop in this.cache) {
                 // a delay will be here for each object!
                 this.capi.get(this.cache[prop]['url'],(function(data) {

                         doCache.cache[prop]['data'] = data;
                         doCache.cache[prop]['ready'] = true;

                         if(doCache.cache[prop]['loaded'] instanceof Function) {
                             var propLoaded = doCache.cache[prop]['loaded'];
                             propLoaded(data);
                         }

                         // check all initialized
                         if(doCache.checkAllReady()===true && allLoaded instanceof Function) {
                             allLoaded(doCache.cache);
                        }
                }) (prop) // KEY: If we have this, we get the correct prop - if removed, we get the correct data - but never both
             );
             }
         };
}

In JsonAPI.class.js:

 function JsonAPI(){

     this.ajax = function(request_method,api_url,data,done,fail,always) {
           var jqxhr = $.ajax(
           {
                type:request_method,
                dataType: "json",
                url: JSON_BASE+api_url,
                data: data
           },JSON_BASE+api_url,data)
            .done(function(data) {
                if(done instanceof Function) {
                    done(data);
                }
            })
            .fail(function(data) {
                if(fail instanceof Function) {
                    fail(data);
                }
            })
            .always(function(data) {
                if(always instanceof Function) {
                   always(data); 
                }
            });

            return jqxhr;
       };

       this.get = function(api_url,done,fail,always) {
           return this.ajax('GET',api_url,"",done,fail,always);
       };
}

The problem is that I do not know how to pass the local variable from the loop (which is a different string on each loop iteration) to the actual callback function without passing it explicitly using (prop) . But if I do this I do not get the data from the callback passed in.

So the actual question is: How can I use a local variable from an iteration (which obviously end before any ajax response is returned) in an Ajax callback function?

Answer 1

Try to aggregate your Ajax calls within an array. Then use $.when to set the callback:

var ajaxRequests = [];
var req1 = $.ajax();
ajaxRequests.push(req1);
$.when(ajaxRequests).done(function () {});

Note, this code is untested.