Running a command once the forEach loop is completed in Angular

Question

Running a command once the forEach loop is completed in Angular

Within the HTML, I have a function that is triggered by an ng-click:

vm.items = [];
vm.moveItems = function() {
    angular.forEach(vm.items,
        function (item) {
            $http({
                method: 'PUT',
                url: '/api/item_move/' + item.id}
            }).then(function(response) {
                Toast.success("Successfully moved item " + item.id);
                vm.reload();
            }, function (error) {
                Toast.error("Failed to move item " + item.id, error);
            });
    });
};

The issue at hand is that the vm.reload() function is being called after each successful response. Ideally, it should be executed only once after the entire forEach loop has finished processing. As I am new to asynchronous programming in JavaScript, I would like to learn about the most commonly used methods to address this problem.

javascript angularjs asynchronous

Answer 1

Answer №1

Organize an array to hold all the promises generated from your HTTP requests. When ready, invoke the Promise.all() method to handle actions once all promises are fulfilled.

vm.items = [];
vm.moveItems = function() {
    var promises = [];
    angular.forEach(vm.items,
        function (item) {
            promises.push($http({
                method: 'PUT',
                url: '/api/item_move/' + item.id}
            }));
    });
    Promise.all(promises)
        .then(function() {
            vm.reload();
        });
};

Update: For AngularJS users, consider using $q.all() as well.

Answer 2

Organize an array to hold all the promises generated from your HTTP requests. When ready, invoke the Promise.all() method to handle actions once all promises are fulfilled.

vm.items = [];
vm.moveItems = function() {
    var promises = [];
    angular.forEach(vm.items,
        function (item) {
            promises.push($http({
                method: 'PUT',
                url: '/api/item_move/' + item.id}
            }));
    });
    Promise.all(promises)
        .then(function() {
            vm.reload();
        });
};

Update: For AngularJS users, consider using $q.all() as well.

Answer 3

Answer №2

Here is a possible solution:


const itemsList = [];
const updateItems = () => {
    let index = 0;
    itemsList.forEach(item => {
        fetch(`/api/update_item/${item.id}`, { method: 'PUT' })
            .then(response => {
                if (response.ok) {
                    console.log(`Item ${item.id} successfully updated`);
                }
                index++;
                if (index === itemsList.length) {
                    refreshPage();
                }
            })
            .catch(error => {
                console.error(`Failed to update item ${item.id}`, error);
                index++;
                if (index === itemsList.length) {
                    refreshPage();
                }
            });
    });
};

Answer 4

Here is a possible solution:


const itemsList = [];
const updateItems = () => {
    let index = 0;
    itemsList.forEach(item => {
        fetch(`/api/update_item/${item.id}`, { method: 'PUT' })
            .then(response => {
                if (response.ok) {
                    console.log(`Item ${item.id} successfully updated`);
                }
                index++;
                if (index === itemsList.length) {
                    refreshPage();
                }
            })
            .catch(error => {
                console.error(`Failed to update item ${item.id}`, error);
                index++;
                if (index === itemsList.length) {
                    refreshPage();
                }
            });
    });
};

Answer 5

Answer №3

Answer:

vm.items = [];

vm.moveItems = function() {
    var tasks = [];

    angular.forEach(vm.items , function(item) {

        var task = $http({
            method: 'PUT',
            url: '/api/item_move/' + item.id}
        }).then(function(response) {
            Toast.success("Item " + item.id + " has been successfully moved");
        }, function (error) {
            Toast.error("Failed to move item " + item.id, error);
        });

        tasks.push(task);

   });

   $q.all(tasks).then(function() { vm.reload() })
});

Answer 6

Answer:

vm.items = [];

vm.moveItems = function() {
    var tasks = [];

    angular.forEach(vm.items , function(item) {

        var task = $http({
            method: 'PUT',
            url: '/api/item_move/' + item.id}
        }).then(function(response) {
            Toast.success("Item " + item.id + " has been successfully moved");
        }, function (error) {
            Toast.error("Failed to move item " + item.id, error);
        });

        tasks.push(task);

   });

   $q.all(tasks).then(function() { vm.reload() })
});

Answer 7

Answer №4

Relocate the call to vm.reload() outside of the forEach loop:

vm.items = [];
vm.moveItems = function() {
  this._$timeout(() => {

    angular.forEach(vm.items,
      function (item) {
        $http({
          method: 'PUT',
          url: '/api/item_move/' + item.id}
        }).then(function(response) {
          Toast.success("Successfully moved item " + item.id);
        }, function (error) {
          Toast.error("Failed to move item " + item.id, error);
        });
    });

  });

  vm.reload();
};

After adding $timeout, the function should allow enough time for the foreach loop to complete.

Answer 8

Relocate the call to vm.reload() outside of the forEach loop:

vm.items = [];
vm.moveItems = function() {
  this._$timeout(() => {

    angular.forEach(vm.items,
      function (item) {
        $http({
          method: 'PUT',
          url: '/api/item_move/' + item.id}
        }).then(function(response) {
          Toast.success("Successfully moved item " + item.id);
        }, function (error) {
          Toast.error("Failed to move item " + item.id, error);
        });
    });

  });

  vm.reload();
};

After adding $timeout, the function should allow enough time for the foreach loop to complete.

Running a command once the forEach loop is completed in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Interactive window allowing the user to closely examine code

Implement a feature to dynamically load data as the user scrolls up, similar to the

Tips for combining all included files into one with Babel

The Protractor allScriptsTimeout feature appears to be ineffective when attempting to load an AngularJS application

Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag

What is the correct way to utilize the karma-ng-html2js-preprocessor?

angular 2 text box clearing functionality appears to be malfunctioning

Unlimited digest loop in Angular.js caused by nested ng-repeat and filter

What is the best way to retrieve a single document from MongoDB by using the URL ID parameter in JavaScript?

Troubleshooting angular service jasmine test - unable to locate $http service

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

Try utilizing a previous iteration of the generator-angular-fullstack

Steps to automatically populate the dropdown upon page load

Contrast between v-for arrangements

CSS to target every second visible tr element using the :nth-child(2n)

Error message "TypeError: onClick is not a function" occurs when attempting to use a prop in a functional component

Unexpected website icon shows up in my Node.js project

Swapping out a code snippet within an HTML document using JavaScript

Ways to check for child items in a JSON object

Automatically submitting a form in React.js based on certain conditions being met