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

Combining video.js and vue.js for seamless integration

Accessing a child component's method within a parent component by making a call to it

Having trouble with the functionality of Bootstrap's nav-tabs 'show' feature?

What is the best way to transfer an integer from my main application to a separate JavaScript file?

Angular JS basic API: Displaying only information that starts with the term 'request'

Why is my "webpack" version "^5.70.0" having trouble processing jpg files?

Error: AJAX response shows as NaN, indicating that the requested resource was not found

What is the best way to track all method calls in a node.js application without cluttering the code with debug statements

Transferring data between jQuery and other global JavaScript variables

JavaScript is unable to post content or access elements

A guide on mapping an array and removing the associated element

"Creating a Hyperlink that Navigates to Specific Content Within a

What is the process for extracting the value of a checkbox generated through JavaScript?

Return user to the previous webpage upon successful login using Node

Tips for formatting dates in Angular 6

How to properly structure a Vue file in vscode to meet eslint guidelines

Fluid sifting and interactive webpage

Handling events in AngularJS UI-Grid

How to obtain the current URL of an iframe?

How can I send arguments to limit the use of 'E' directives in order to create a dynamic template?