AngularJS: forEach and http get data - wait until all was loaded

Question

Lets say i have article with comments.

And my data is similar:

  {ArticleId...., someFields...., Comments: [{AuthorId:1, Text:''}, {AuthorId:2, Text:''}, {AuthorId:3, Text:''}]}

and i'm getting user data (like avatar, name etc...) via getting it: /user/{id}

(but i load this only after user click's on comments...)

$scope.getUserData = function(el) {
  $http.get(settings.apiBaseUri + '/app/users/' + el.AuthorId, {
    headers: {
      'Content-Type': 'application/json',
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache',
      'If-Modified-Since': ''
    }
  })
  .success(function(response) {
    /*store some data*/
  });
});

$scope.getArticleData = function(){
    angular.forEach($scope.article.Comments, function(el) {
        $scope.getUserData(el.AuthorId);
    });
    /*How here i could wait untill my forEach done all work (also all http data was loaded) and only then run my new method?*/
};

How i could wait untill my forEach done all work (also all http data was loaded) and only then run my new method?

Instead of sending a lot of http requests, I would send just once with an array of el.AuthorIds. That would make your life easier, I think. — Jahongir Rahmonov
– Jahongir Rahmonov, Commented Sep 18, 2015 at 13:09
Then, the only thing I can think of now is using a counter. For example, you have 11 comments, and in the success part of getUserData, you increase a counter by one every time and if it equals to 11, it will mean that the last one was processed and it is over. — Jahongir Rahmonov
– Jahongir Rahmonov, Commented Sep 18, 2015 at 13:16
If you want a synchronous call why are you using asynchronous web calls?? and its not possible using angular. You can use ajax synchronous calls if you want.. — Sumodh S
– Sumodh S, Commented Sep 18, 2015 at 13:23

matiou · Accepted Answer · 2015-09-18 13:58:18Z

4

I think you could use a promise array for that, containing the promises created by $http. Something like :

$scope.getUserData = function(el) {
  var promise = $http.get(settings.apiBaseUri + '/app/users/' + el.AuthorId, {
    headers: {
      'Content-Type': 'application/json',
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache',
      'If-Modified-Since': ''
    }
  })
  .success(function(response) {
    /*store some data*/
  });
  return promise;
});

$scope.getArticleData = function(){
    var promises = [];
    angular.forEach($scope.article.Comments, function(el, promises) {
        promises.push($scope.getUserData(el.AuthorId));
    });
    $q.all(promises).then(/*Whatever you want to do*/);
};

Or prettier, like suggested by @sdgluck :

$scope.getArticleData = function(){
        var promises = $scope.article.Comments.map(function() {
          return $scope.getUserData(el.AuthorId);
        });
        $q.all(promises).then(/*Whatever you want to do*/);
    };

edited Sep 18, 2015 at 13:58

answered Sep 18, 2015 at 13:24

matiou

1561 silver badge7 bronze badges

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

2 Comments

sdgluck Over a year ago

You could simplify this by mapping the Comments array: var promises = $scope.article.Comments.map(function() { return $scope.getUserData(el.AuthorId); })

byCoder Over a year ago

pastebin.com/eeUwFsXu - didn't work (console.log is executed, but requests are in pending state)

Collectives™ on Stack Overflow

AngularJS: forEach and http get data - wait until all was loaded

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related