Question

Let’s say I have the following javascript:

(function($) {
  $.getJSON(url, function(data) {
    $.each(data.rows, function(index, row) {
      $.getJSON(url2, function(data2) {
        //Do something with data2, like adding it to an element on the page.
        //When all rows have been processed, by this function, I want to
        //call a function.
      }
    }
  }
})(jQuery)

I would like to be notified when all the inner $.getJSON has returned.

In my real code, I will use a callback function that I would like to be called when all requests are done.

Answer 1

You could probably use jQuery.when() for this, like:

(function($) {
  $.getJSON(url, function(data) {

    $.when.apply($, $(data.rows).map(function (idx, row) {
      // return deferred object
      return $.getJSON(url, function () {
        // single callback
        console.log('one done');
      });
    }))
    .then(function () {
      // success callback
      console.log('success');
    }, function () {
      // failure callback
      console.log('failure');
    });
  });
})(jQuery)

Edit: just realised that when won’t taken an array as argument, so I changed the code use .apply instead.