Angularjs loop trought $http.post

Question

When I loop through the $http post service for Angularjs

for (var i = 0; i < $scope.tagStyles.length; i++) {
  $scope.profilTag.tag = $scope.tagStyles[i].id_tag;
  $scope.profilTag.texte = $scope.tagStyles[i].style ;
  $scope.profilTag.profil = lastDocId;

  $http.post('/ajouterProfilTag',$scope.profilTag) 
  .success(function(data){ 
    if (data=='err'){ 
      console.log("oops"); 
    }     
  });
};

I get just the last element in my database. Is it something related to asynchronous call ?

And what do you mean by 'looping'? Can't see any loop in your code. — user2445933
– user2445933, Commented Jan 9, 2014 at 12:33
@AndreyShustariov i mean by looping that i have added the $http.post inside a for loop — badaboum
– badaboum, Commented Jan 9, 2014 at 14:21
Well, callback of success method is asynchronous. It executes in the future. Maybe even after your loup is done. — user2445933
– user2445933, Commented Jan 9, 2014 at 14:23
@AndreyShustariov i have edited the post and what i need to do is to call the $http.post inside the loop any ideas ? is there a way to make the call back of success method synchronous ? — badaboum
– badaboum, Commented Jan 9, 2014 at 14:24

Ilan Frumer · Accepted Answer · 2014-01-09 14:44:12Z

9

$http docs:

The $http service will not actually send the request until the next $digest() is executed.

What probably happens is that $scope.profilTag is being passed by reference to $http and only being sent after a $digest. You override that reference each iteration and that's why you only left with your last item.

Be aware that functions has scopes but for loops don't!

Try this instead:

$scope.tagStyles.forEach(function(item){
  var profilTag = {
    tag: item.id_tag,
    texte: item.style,
    profil: lastDocId,
  };

  $http.post('/ajouterProfilTag',profilTag) 
  .success(function(data) { 
    if (data=='err'){ 
      console.log("oops"); 
    }
  });

});

edited Jan 9, 2014 at 14:44

answered Jan 9, 2014 at 14:39

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

1 Comment

Jeff Longo Over a year ago

This was the best solution for my issue, as I kept having scope send the same object over no matter what I did.

filipe.costa01 · Accepted Answer · 2016-07-28 06:31:17Z

7

You may want to use AngularJs promise API.

var promiseArray = [];

for (/*your loop statements*/) {
 promiseArray.push($http.post('/url', $scope.var));
}

$q.all(promiseArray).then(function(dataArray) {
    // Each element of dataArray corresponds to each result of http request.
});

See Usage->returns section in $http service docs, to understand what is returned via dataArray parameter.

edited Jul 28, 2016 at 6:31

filipe.costa01

2381 silver badge10 bronze badges

answered Jan 9, 2014 at 14:26

user2445933

1 Comment

Sarah_A Over a year ago

it worked for me better that Ilan's answer, because it kept all requests in an array and sent them one after the other without any interrupt. Ilan's answer let other requests to be sent in between, which was not desirable for my case.

just-boris · Accepted Answer · 2014-01-09 14:35:38Z

3

It is happened because request makes asynchronously. Real requests are sending after all iterations have completeted. Try send copy of params like this

$http.post('/ajouterProfilTag',angular.copy($scope.profilTag))

answered Jan 9, 2014 at 14:35

just-boris

9,7865 gold badges51 silver badges87 bronze badges

1 Comment

Fakeer Over a year ago

I feel like I'm cheating because this worked perfectly and easily without me having to endure a third-degree torture about closures.

Collectives™ on Stack Overflow

Angularjs loop trought $http.post

3 Answers 3

$http docs:

Try this instead:

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

$http docs:

Try this instead:

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related