Executing a callback in AngularJS after multiple HTTP requests have been completed using a forEach loop

Question

Executing a callback in AngularJS after multiple HTTP requests have been completed using a forEach loop

I am trying to update multiple items within a foreach loop by sending HTTP requests, and I need a callback once all the requests are complete. Despite searching on Stack Overflow, I haven't found a solution that works for me.

Here is the snippet of my code:

$q.all(_($scope.students.items).each(function(item) {
   $scope.student.update(); //this triggers an HTTP call
})).then(function() {
   // I'm in need of a callback at this point
   alert("complete"); //this should only be displayed after all students have been updated, but it appears before all network calls are finished
});

Below is a generic update function example:

self.update = function(item, callback) {
   that.post(item, self.getUrl("update"), function(err, data) {
      if (self.formatter) {
         data = self.formatter(data);
      }
      callback(err, data);
   });
};

Does anyone have any suggestions or solutions to this issue?

javascript angularjs

Answer 1

Answer №1

In the update() function, don't forget to include a return keyword so that it returns a promise. Additionally, ensure that the that.post() function also returns a promise:

self.update = function(item, callback) {
   return that.post(item, self.getUrl("update") , function(err, data) {
      if (self.formatter) {
         data = self.formatter(data);
      }
      callback(err, data);
   });
 };

With this adjustment, the following code snippet should work as intended:

var promises = [];
_($scope.students.items).each(function(item) {
   promises.push($scope.student.update());
})
$q.all(promises).then(function() {
   alert("complete");
});

Answer 2

In the update() function, don't forget to include a return keyword so that it returns a promise. Additionally, ensure that the that.post() function also returns a promise:

self.update = function(item, callback) {
   return that.post(item, self.getUrl("update") , function(err, data) {
      if (self.formatter) {
         data = self.formatter(data);
      }
      callback(err, data);
   });
 };

With this adjustment, the following code snippet should work as intended:

var promises = [];
_($scope.students.items).each(function(item) {
   promises.push($scope.student.update());
})
$q.all(promises).then(function() {
   alert("complete");
});

Answer 3

Answer №2

$q.all(_.map($scope.students.items, function(student) {
   return student.update();
})).then(function() {
   //all updates have been completed
});

In order for the code above to work, the update function for each item in $scope.students.items must return a promise. It should look something like this:

function update() {
   return $http( ... );
}

Answer 4

$q.all(_.map($scope.students.items, function(student) {
   return student.update();
})).then(function() {
   //all updates have been completed
});

In order for the code above to work, the update function for each item in $scope.students.items must return a promise. It should look something like this:

function update() {
   return $http( ... );
}

Answer 5

Answer №3

For another approach, consider implementing the following code snippet using the map function:

$q.all(_($scope.students.items).map(function(item) {
  item.update();
})).then(function() {
  alert("complete");
});

The code has been updated with a new snippet incorporating methods that provide simple promises. There are two ways to achieve this task:

Creating an array of promises and utilizing q.all
Utilizing q.all along with map

angular.module('demoApp', []).controller('DemoController', function($scope, $q, $timeout) {
  var a = function() {
    var deferred = $q.defer();
    console.log('Executing a');
    deferred.resolve();
    return deferred.promise;
  };
  var b = function() {
    var deferred = $q.defer();
    console.log('Executing b');
    deferred.resolve();
    return deferred.promise;
  };
  var c = function() {
    var deferred = $q.defer();
    console.log('Executing c');
    deferred.resolve();
    return deferred.promise;
  };
  var f = [{
    call: a
  }, {
    call: b
  }, {
    call: c
  }];

  $scope.mapTest = function() {
    $q.all(f.map(function(item) {
      return item.call();
    })).then(function() {
      console.log("complete");
    });

  };
  $scope.promisePush = function() {
    var promises = [];
    angular.forEach(f, function(item) {
      promises.push(item.call());
    });
    $q.all(promises).then(function() {
      console.log('complete');
    });
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demoApp">
  <div ng-controller="DemoController">
    <button ng-click="mapTest()">Q.all using map</button>
    <button ng-click="promisePush()">Q.all using promise push</button>
  </div>
</body>

Answer 6

For another approach, consider implementing the following code snippet using the map function:

$q.all(_($scope.students.items).map(function(item) {
  item.update();
})).then(function() {
  alert("complete");
});

The code has been updated with a new snippet incorporating methods that provide simple promises. There are two ways to achieve this task:

Creating an array of promises and utilizing q.all
Utilizing q.all along with map

angular.module('demoApp', []).controller('DemoController', function($scope, $q, $timeout) {
  var a = function() {
    var deferred = $q.defer();
    console.log('Executing a');
    deferred.resolve();
    return deferred.promise;
  };
  var b = function() {
    var deferred = $q.defer();
    console.log('Executing b');
    deferred.resolve();
    return deferred.promise;
  };
  var c = function() {
    var deferred = $q.defer();
    console.log('Executing c');
    deferred.resolve();
    return deferred.promise;
  };
  var f = [{
    call: a
  }, {
    call: b
  }, {
    call: c
  }];

  $scope.mapTest = function() {
    $q.all(f.map(function(item) {
      return item.call();
    })).then(function() {
      console.log("complete");
    });

  };
  $scope.promisePush = function() {
    var promises = [];
    angular.forEach(f, function(item) {
      promises.push(item.call());
    });
    $q.all(promises).then(function() {
      console.log('complete');
    });
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demoApp">
  <div ng-controller="DemoController">
    <button ng-click="mapTest()">Q.all using map</button>
    <button ng-click="promisePush()">Q.all using promise push</button>
  </div>
</body>

Answer 7

Answer №4

To optimize efficiency, it is recommended not to send multiple ajax calls within a foreach loop. Instead, consolidate the updates into a single ajax request named "studentsUpdate" and handle the response by iterating over the student collection to update the data accordingly. This approach promotes best practices by reducing the number of ajax calls made.

Answer 8

To optimize efficiency, it is recommended not to send multiple ajax calls within a foreach loop. Instead, consolidate the updates into a single ajax request named "studentsUpdate" and handle the response by iterating over the student collection to update the data accordingly. This approach promotes best practices by reducing the number of ajax calls made.

Executing a callback in AngularJS after multiple HTTP requests have been completed using a forEach loop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adding a C# variable to a URL in a Razor view using jQuery

JavaScript: An object containing a unified handler for all method invocations

What is the best way to transfer an object from the view to the controller in AngularJS and ASP.net MVC

Creating distinct short identifiers across various servers

The jQuery remove function will only take effect on the second click following an AJAX request

Attempting to grasp the sequence in which setTimeout is ordered alongside Promise awaits

Exploring the capabilities of NodeJS together with the fetch function of Backbone

The text becomes distorted and unreadable after the function is applied. It is impossible to decipher the message

Leverage variables in JavaScript to establish a unique style

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Strategies for Returning Multiple Values from a Function in JavaScript

Error encountered during the prerendering process on Vercel's Next.js build

Navigating through the endless scroll behavior in Twitter using CasperJS (PhantomJS)

Retrieve JSON data by making an AJAX request to a PHP file using the POST method

Creating an object and setting its prototype afterwards

JavaScript Numbers Having Strange Behavior

Navigating File Paths in Node.js

Unexpected Type Error: Unable to Assign 'Render' Property to Undefined

Utilizing the power of AngularJS in conjunction with the Edmunds Media API to retrieve stunning

When a link is right-clicked, the window.opener property becomes null