How to call function after API gets are finished inside of for loop?

Question

Below is a for loop which will run a max of time times, Inside of that for loop I make a GET call to return some data that needs to be added to my obj object.

I need some way to tell when all 3 GETS are finished as well as the for loop before calling the TagFactory.buildSavedView(obj) line. Thoughts?

for (var i = 0; i < termIDs.length; i++) {
    ApiFactory.getTagData(tickers[i], termIDs[i]).then(function(data) {
        singleTagArray.push(data.data.tickers);

        var updatedTag   = TagFactory.renderDirections(singleTagArray, null, period);
            newTagObject = updatedTag[0];

        tags.push(newTagObject);

        finishObjSetup(tags);
        console.log('viewHeaderDirect > obj: ', obj);
    });
}

TagFactory.buildSavedView(obj);
vm.loadSavedModal = false;

jQuery [deferred objects](https://api.jquery.com/category/deferred-object/) — Cool Blue, Jun 25 '15 at 22:23
@CoolBlue why jQuery deferred when angular has `$q`..for more details look at mine answer — Pankaj Parkar, Jun 25 '15 at 22:34
possible duplicate of [Wait for all promises to resolve](http://stackoverflow.com/q/21759361/1048572) — Bergi, Jun 25 '15 at 22:54
@PankajParkar got another promise question for you if you have time :) http://stackoverflow.com/questions/31328924/how-to-use-the-q-promise-feature-in-this-situation-to-wait-for-data-to-be-ready — Leon Gaban, Jul 09 '15 at 22:03
@PankajParkar thanks! yeah this is kinda different, since the API call is in a different Service and not the Controller — Leon Gaban, Jul 09 '15 at 22:05

score 4 · Accepted Answer · answered Jun 25 '15 at 22:26

You need to use $q.all, but creating a promise array and pass it to $q.all that will execute its .then only when all the promises gets executed.

Code

var promises = [];
for (var i = 0; i < termIDs.length; i++) {
    var promise = ApiFactory.getTagData(tickers[i], termIDs[i]).then(function(data) {
        singleTagArray.push(data.data.tickers);

        var updatedTag   = TagFactory.renderDirections(singleTagArray, null, period);
            newTagObject = updatedTag[0];

        tags.push(newTagObject);

        finishObjSetup(tags);
        console.log('viewHeaderDirect > obj: ', obj);
    });
    promise.push(promise); //creating promise array.
}

$q.all(promise).then(function(){
    //here the call will goes after all calls completed.
})

@LeonGaban actually its 2 min.. I saw this question late :D Thanks :) — Pankaj Parkar, Jun 25 '15 at 22:33

score 2 · Answer 2 · answered Jun 25 '15 at 22:23

You could use a simple counter:

var y = 0;

for (var i = 0; i < termIDs.length; i++) {
  ApiFactory.getTagData(tickers[i], termIDs[i]).then(function (data) {
    y++;
    singleTagArray.push(data.data.tickers);

    var updatedTag = TagFactory.renderDirections(singleTagArray, null, period);
    newTagObject = updatedTag[0];

    tags.push(newTagObject);

    finishObjSetup(tags);
    console.log('viewHeaderDirect > obj: ', obj);

    if (y === termIDs.length) {
      TagFactory.buildSavedView(obj);
      vm.loadSavedModal = false;
    }

  });
}

How to call function after API gets are finished inside of for loop?

2 Answers2