callback after async forEach AngularJS

Question

How do I add a callback function after an async forEach Loop?

Here is some better context:

$scope.getAlbums = function(user, callback) {
    $scope.albumsList.forEach(function (obj, i) {
        $scope.getAlbum(user, obj.id, function(value){
            $scope.albums.push(value);
        });
    });
    // callback(); ???
};

$scope.getAlbums('guy123', function(){
    // forEach loop is all done!
    console.log($scope.albums)
});

Controller:

.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {

    $scope.getAlbum = function(user, id, callback) {
        Imgur.album.get({user:user, id:id},    
            function(value) {
                return callback(value.data);
            }
        );
    }

    $scope.getAlbums = function(user, callback) {
        // Callback function at end of this forEach loop?
        // Request is async...
        $scope.albumsList.forEach(function (obj, i) {
            $scope.getAlbum(user, obj.id, function(value){
                $scope.albums.push(value);
            });
        });
    };
)]};

Service:

.factory('Imgur', function($resource) {
    return {
        album : $resource('https://api.imgur.com/3/account/:user/album/:id')
    }
});

Mark Coleman · Accepted Answer · 2013-05-08 16:19:35Z

45

As Andrew said usage of $q and the deferred object should allow you to accomplish your goal.

You want to use $q.all() This will make sure all of your promise objects are resolved and then you can call your call back in .then()

function MyCtrl($scope, $q, $http) {

    $scope.albumsList = [{
            id: 1,
            name: "11"
        }, {
            id: 2,
            name: "22"
        }
    ];
    $scope.albums = [];
    $scope.getAlbum = function(user, id, callback) {
        return $http.get("https://api.imgur.com/3/account/" + user + "/album/" + id).success(
            function(value) {
                return callback(value.data);
            }
        );
    }
    $scope.getAlbums = function (user, callback) {
        var prom = [];
        $scope.albumsList.forEach(function (obj, i) {
            prom.push($scope.getAlbum(user, obj.id, function(value){
                $scope.albums.push(value);
            }));
        });
        $q.all(prom).then(function () {
            callback();
        });
    };
    $scope.getAlbums('guy123', function () {
        alert($scope.albums.length);
    });
}

Example with this on jsfiddle

Works but not with $http calls

With the deferred object you gain access to a promise where you can change successive then() calls together. When you resolve the deferred object it will execute the foreach and then execute your call back function you supplied. I tried to simplify your example a bit further so it would work in jsfiddle.

function MyCtrl($scope, $http, $q) {

    $scope.albumsList = [{
        id: 1,
        name: "11"
    }, {
        id: 2,
        name: "22"
    }];
    $scope.albums = [];
    $scope.getAlbums = function (user, callback) {
        var deferred = $q.defer();
        var promise = deferred.promise;
        promise.then(function () {
            $scope.albumsList.forEach(function (obj, i) {
                $scope.albums.push(obj);
            });
        }).then(function () {
            callback();
        });
        deferred.resolve();
    };
    $scope.getAlbums('guy123', function () {
        alert($scope.albums.length);
    });
}

Example on jsfiddle

A bit more reading on deferred and promises.

edited May 8, 2013 at 16:19

answered May 8, 2013 at 0:11

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dan Kanze Over a year ago

This is exactly what I needed, however, when I try with external resource data --- it doesn't hold it's promise ;) ... Could you please provide an example with any API data like twitter?

Mark Coleman Over a year ago

Since you are using the $resource that also returns a promise as well, you will need to modify your code so it chains the promises together and calling resolve() starts up the whole mechanism.

Mark Coleman Over a year ago

See update with example on jsfiddle that does simulated ajax post.

Dan Kanze Over a year ago

I've implimented your solution and pushed latest changes to project @ github.com/gigablox/angular-imgur-gallery/blob/master/app/js/… however the code I added still does not defer execution of those $resource calls I'm afraid :/ ... Did I miss something?

Mark Coleman Over a year ago

I misread the api documentation, $resource does not in fact return a promise object at all, you will need to use $http so you can utilize $q.all() I read $resource is going to gain promise support but not until a later release.

|

Rajkamal Subramanian · Accepted Answer · 2013-05-08 01:17:15Z

5

$scope.getAlbums = function(user, callback) {

        var promiseArr = [];
        $scope.albumsList.forEach(function (obj, i) {
            var anHttpPromise = 
            $scope.getAlbum(user, obj.id, function(value){
                $scope.albums.push(value);
            });
            promiseArr.push(anHttpPromise);
        });

        $q.all(promiseArr).then(function(){
            // This callback function will be called when all the promises are resolved.    (when all the albums are retrived)      
        })
    };

    $scope.getAlbum = function(user, id, callback) {
        var anHttpPromise = Imgur.album.get({user:user, id:id},    
            function(value) {
                return callback(value.data);
            }
        );
        return anHttpPromise;
    }

In the above code:

The getAlbum is made to return an promise.
Collecting an promise for each iteration of the getAlbums list
Once all the promises are collected, the promise array is passed to $q.all
The $q.all method instead returns an final promise whose callback function will be triggered once all the promises in the array are resolved.

answered May 8, 2013 at 1:17

Rajkamal Subramanian

6,9646 gold badges56 silver badges71 bronze badges

1 Comment

Dan Kanze Over a year ago

I've implimented your solution and pushed latest changes to project @ github.com/gigablox/angular-imgur-gallery/blob/master/app/js/… However it still does not defer promise. Mabye I missed something?

Dan Kanze · Accepted Answer · 2013-05-08 18:40:47Z

Using the $resource promise PR commit slated for 1.1.3, I was able to wrap $resource calls with $q and control the flow of their async behavoir.

$scope.getAlbum = function(user, id, callback) {
    var promise = Imgur.album.get({user:user, id:id}).$promise.then(
        function( value ){
            return callback(value.data);
        },
        function( error ){
            //Something went wrong!
        }
    )
    return promise;
}

$scope.getAlbums = function(user, callback) {
    var prom = [];
    $scope.albumsList.forEach(function (obj, i) {
        var promise =
        $scope.getAlbum(user, obj.id, function(value){
            $scope.albums.push(value);
        });
        prom.push(promise);

    });

    $q.all(prom).then(function () {
        callback();
    });
};

$scope.getAlbums(user, function(){
    // Totally works, bro.
    console.log($scope.albums);
});

user554180 · Accepted Answer · 2013-05-07 23:37:27Z

0

It looks like deferred http://docs.angularjs.org/api/ng.$q and specifically chaining promises could be useful here.

answered May 7, 2013 at 23:37

user554180

2 Comments

Dan Kanze Over a year ago

Could you share an example in context with this problem :) ?

user554180 Over a year ago

Please see Mark's answer above.

Collectives™ on Stack Overflow

callback after async forEach AngularJS

4 Answers 4

7 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related