How can we trigger a function once the API requests within a for loop have completed?

Question

How can we trigger a function once the API requests within a for loop have completed?

Within this for loop, a maximum of 'time' iterations are specified. With each iteration, a GET call is made to retrieve data that must be added to the obj object.

I am seeking a method to determine when all 3 GETS have been completed along with the for loop, prior to executing the TagFactory.buildSavedView(obj) line. Any suggestions?

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;

javascript angularjs for-loop promise angular-promise

Answer 1

Answer №1

To ensure all promises are executed before proceeding, utilize the $q.all method by creating a promise array and passing it to $q.all. This will trigger the .then function only when all promises have been resolved.

Code Snippet:

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);
    });
    promises.push(promise); //creating promise array.
}

$q.all(promises).then(function(){
    //this code block will execute after all promises have been resolved
})

Answer 2

To ensure all promises are executed before proceeding, utilize the $q.all method by creating a promise array and passing it to $q.all. This will trigger the .then function only when all promises have been resolved.

Code Snippet:

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);
    });
    promises.push(promise); //creating promise array.
}

$q.all(promises).then(function(){
    //this code block will execute after all promises have been resolved
})

Answer 3

Answer №2

To keep track of progress, a straightforward counter can be implemented:

var count = 0;

for (var index = 0; index < termIDs.length; index++) {
  ApiFactory.getTagData(tickers[index], termIDs[index]).then(function (data) {
    count++;
    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 (count === termIDs.length) {
      TagFactory.buildSavedView(obj);
      vm.loadSavedModal = false;
    }

  });
}

Answer 4

To keep track of progress, a straightforward counter can be implemented:

var count = 0;

for (var index = 0; index < termIDs.length; index++) {
  ApiFactory.getTagData(tickers[index], termIDs[index]).then(function (data) {
    count++;
    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 (count === termIDs.length) {
      TagFactory.buildSavedView(obj);
      vm.loadSavedModal = false;
    }

  });
}

How can we trigger a function once the API requests within a for loop have completed?

Answer №1

Answer №2

Similar questions

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Eliminate any blank spaces in the string before comparing the option value to determine whether the DIV should be

Is the Date Epoch a reliable form of unique identification?

How can we best organize a VueJS application to accommodate this specific logic?

Determine the quantity of items within a JSON array

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

Angular: the directive following the expression

Sending data through forms

The Heroku Node.js application encountered an issue when trying to apply the style due to an incompatible MIME

Mapping an array in ReactJS based on the specific order of another array

Enhancing angular service with additional parameters

Htmlunit driver encounters difficulty executing Javascript

The concept of nested views in Angular UI-Router allows for a

Can you provide tips on using Ajax to store a cache file?

Tips for sending a JavaScript object to a Java Servlet

Styling Angular Components with Inline CSS

Trigger a jQuery event when a particular element has finished loading

When changing the dropdown option on a separate page in React/Next JS, all checkboxes show the clicked style as a result of utilizing useState

Switching to a different view in a React Native application

I'm having trouble getting the [resetFilterOnHide]="true" functionality to work with primeng 5.2.7. Can anyone provide a solution for this issue?