Infinite loop of http requests in angularjs

Question

I saw other questions about this but didn't helped me.

I have function in angularjs controller:

$scope.getUser = function(id){
    ret = null;
    $http.get('services/rest/users/' + id).then(
        function(response){
            ret = response.data.name;
        }, 
        function(response){
        }
    )
        return ret;
}

And I call that function in html:

<div ng-repeat = "move in moves">Player:<span> {{getUser(move.player_id)}} </span> - {{move.guess}} - {{move.answer}}</div>

And this creates infinite loop of 'services/rest/users/' + id requests. I saw that angular can do this when some object in scope is always changing, but I don't see this here.

Isn't it due to digest cycle getting called again and again whenever your one request (backend) is getting completed? That can call ng-repeat directive again. — yugantar kumar
– yugantar kumar, Commented May 28, 2017 at 18:45
First, make get user a promise using $q and resolve if response or reject if error. Second, it is a bad practice to call multiple http requests in ng-repeat. Bring your data in one request if you can and when the data is ready, populate an array binded to the moves scope variable. — Yonatan Vainer
– Yonatan Vainer, Commented May 28, 2017 at 18:45
It loops even without ng-repeat. I called that function from another place and it started looping again. Will try with $q. — Gavrilo Adamovic
– Gavrilo Adamovic, Commented May 28, 2017 at 18:50
Never use functions in view that make asynchronous requests. — charlietfl
– charlietfl, Commented May 28, 2017 at 19:02

charlietfl · Accepted Answer · 2017-05-28 19:12:32Z

4

Approach is all wrong.

$http is asynchronous and ret will always be null when returned from getUser()

Never use functions in view that directly make asynchronous requests.

Instead, in controller( or better yet in service) iterate all your moves , request player data , and add that as property of each move

function getUser(id) {
  return $http.get('services/rest/users/' + id).then(function(response) {
    return response.data.name;
  }).catch(function() {
    return 'Unknown Player';
  })
}


angular.forEach($scope.moves, function(move){
   getUser(move.player_id).then(function(player){
      move.player = player;
   });
});

View:

<div ng-repeat = "move in moves">Player:<span> {{move.player)}} </span>...</div>

answered May 28, 2017 at 19:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Infinite loop of http requests in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related