javascript multiple ajax calls, single callback?

Question

my first post here, hi everyone :)

i have this js code to access a json api:

function a() {
    //does some things
    //...
    //then calls function b
    b(some_params);
}
function b(params) {
    //calls an objects method that makes an ajax call to an api and get the response in json
    someObject.makeajaxcalltoapi(params, function(response) {
        alertFunction(response);
    });
}
function alertFunction(resp) {
    console.log ("the response is: ");
    console.log(resp);
}

this is working ok, but now i need to modify it in order to do this: in function a(), instead of making a single call to b(), i need to call b() multiple times in a loop, with different parameters each time. and then i want to call alertFunction() passing it an array with all the responses, but only after all responses have been received.

i have tried to use $.when and .then, after seeing some examples on deferred objects, but its not working:

function a() {
    //does some things
    //...
    //then calls function b
    var allResponses = [];
    $.when(
        anArray.forEach(function(element) {
            allResponses.push(b(some_params));
        });
    ).then(function() {
        alertFunction(allResponses);
    });
}
function b(params) {
    //calls an objects method that makes an ajax call to an api and get the response in json
    someObject.makeajaxcalltoapi(params, function(response) {
        //alertFunction(response);
    });
    return response;
}
function alertFunction(allresp) {
    console.log ("the responses are: ");
    console.log(allresp);
}

any help?

UPDATE - ok finally got it working. i put here the final code in case it helps somebody else...

function a() {
    //does some things
    //...
    //then calls function b
    var requests = [];
    //-- populate requests array
    anArray.forEach(function(element) {
        requests.push(b(some_params));
    });
    $.when.apply($, requests).then(function() {
        alertFunction(arguments);
    });
}
function b(params) {
    var def = $.Deferred();
    //calls an objects method that makes an ajax call to an api and get the response in json
    someObject.makeajaxcalltoapi(params, function(response) {
        def.resolve(response);
    });
    return def.promise();
}
function alertFunction(allresp) {
    console.log ("the responses are: ");
    console.log(allresp);
}

http://stackoverflow.com/questions/17981631/jquery-ajax-inside-a-loop — mplungjan, Jun 18 '14 at 14:21

Robert Messerle · Accepted Answer · 2014-06-18T18:46:45.343

1

Here is one way to use $.when with an unknown number of AJAX calls:

$(function () {
  var requests = [];
  //-- for loop to generate requests
  for (var i = 0; i < 5; i++) {
    requests.push( $.getJSON('...') );
  }
  //-- apply array to $.when()
  $.when.apply($, requests).then(function () {
    //-- arguments will contain all results
    console.log(arguments);
  });
});

Edit

Applied to your code, it should look something like this:

function a() {
    var requests = [];
    //-- populate requests array
    anArray.forEach(function(element) {
        requests.push(b(some_params));
    });
    $.when.apply($, requests).then(function() {
        alertFunction(arguments);
    });
}
function b(params) {
    //-- In order for this to work, you must call some asynchronous
    //-- jQuery function without providing a callback
    return someObject.makeajaxcalltoapi();
}
function alertFunction(allresp) {
    console.log ("the responses are: ");
    console.log(allresp);
}

edited Jun 18 '14 at 18:46

answered Jun 18 '14 at 14:41

Robert Messerle

3,022
14
18

thanks, but I cant make it work with my code... I understand now how the when.apply works but no idea how to link this to my code... I guess the $when.apply should be in function a()? but then where do I define de $.Deferred? Im too newbie on all this i guess... – patsy2k Jun 18 '14 at 17:31
thanks Robert, but still not working. i get a "ReferenceError: response is not defined". (it seems i cant return it since 'response' will be only available once the callback function inside b() gets run)... – patsy2k Jun 18 '14 at 18:22
Ah, yea, that handling should live in alertFunction. I updated the JSFiddle to reflect this. Of course, it's tough to give an exact solution without more context or actual code: http://jsfiddle.net/Ja8A8/2/ – Robert Messerle Jun 18 '14 at 18:42
ok, it seems its finally working with your last code and some modifications. thank you! – patsy2k Jun 19 '14 at 00:38

javascript multiple ajax calls, single callback?

1 Answers1

Edit