Ajax call inside forEach loop Angular

Question

I am having an Array that contains objects in AngularJS. Based on the value of a property (snooz) of these objects I have to call a POST request (getData.sonnzeUpdate()). After going through each object in the array, finally, I have to call a GET request. My issue is the GET request (inside the function $scope.getTableData) is executed before getting the response (res in .then(function(res){}) of the POST request.

I have tried with angular.forEach() and $q.

Here is my code sample

var notifiedAlarms = [];
var d = new Date();
var checkTine = d.getHours() + "-" + d.getMinutes() + "-" + "00";

angular.forEach(snoozedData, function (snoozed_asset, asset_key) {
    if (snoozed_asset.snooz == checkTine) {
        var data = {};
        snoozed_asset.snooz = '';
        data.data = snoozed_asset;

        var deferred = $q.defer();
        getData.sonnzeUpdate(data).then(function (res) {
            if (res.status == '200') {
                toastr.info('Alarm with property ' + data.data.actualFailureArea + ' is activated');
                // $scope.getTableData(); //donot want to call it here. as same call will for multiple time
                notifiedAlarms.push(deferred.promise);
            } else {
                // console.log('Error in update');
            }
        });
    } else {
        // no matching snooz
    }
});
$q.all(notifiedAlarms).then($scope.getTableData());

Note that a generator is suitable for this kind of stuff too. Cleans up all the promise stuff. Down level generators still are problematic in TS though. — Tim Consolazio, May 03 '17 at 10:43

score 0 · Answer 1 · answered May 03 '17 at 10:41

In your code, notifiedAlarms is empty at that point: $q.all(notifiedAlarms), because you add the promises to that Array, after they have finished.

And avoid the Deferred antipattern. getData.sonnzeUpdate() already returns you a Promise.

angular.forEach(snoozedData, function (snoozed_asset, asset_key) {
    if (snoozed_asset.snooz != checkTine) return;
    snoozed_asset.snooz = '';

    notifiedAlarms.push(
        getData.sonnzeUpdate({ data: snoozed_asset }).then(function(res) {
            if (res.status == '200') {
                toastr.info('Alarm with property ' + data.data.actualFailureArea + ' is activated');
            } else {
                throw new Error('Error in update');
            }
        })
    );
});

hi, thanks for your update. Where to call my _$scope.getTableData_ service? My concern is with calling this service. — SSS, May 03 '17 at 14:43

tanmay · Answer 2 · 2017-05-03T10:52:25.823

0

With $q.all(notifiedAlarms).then($scope.getTableData()) you're executing $scope.getTableData() directly instead of telling it to call it once promises are resolved. Hence, it gets executed earlier than you want.

Change it to $q.all(notifiedAlarms).then($scope.getTableData); to get desired behavior.

Here's an example elaborating this:

jsfiddle example

Notice how in the fiddle, I have both ways,

myownservice.UpdateSomeData().then($scope.setValue)
myownservice.UpdateSomeData().then($scope.setValue2())

And, in HTML only value gets updated and not value2

edited May 03 '17 at 10:52

answered May 03 '17 at 10:46

tanmay

7,761
2
19
38

sorry! not working :( same execution.....it goes to service then before getting the response calling _getTableData()_ then showing is toastr – SSS May 03 '17 at 14:59
@SSS can you put up your code in plunker or fiddle to reproduce it with mock API using local JSON files? Can't say what's wrong without looking at working example. – tanmay May 03 '17 at 15:15
Yes sure, I will share the link – SSS May 03 '17 at 17:34

Ajax call inside forEach loop Angular

2 Answers2