$http call inside angular foreach loops before http response

Question

I have a list named $scope.propname which has an object named latlong so i need to find the distance of all properties from a specific location so here is what i am doing

for (var i = 0; i < $scope.propname.length; i++) {
  if ($scope.propname[i].latlong == "") {
    var pptlatlong = ("" + "," + "");
  } else {
    var pptlatlong = $scope.propname[i].latlong.replace(/\s*,\s*/g, ",");
  }
  var latlongdata = {
    scoord: $scope.loclatlong,
    ecoord: pptlatlong
  }
  $http({
    method: 'post',
    data: latlongdata,
    url: $rootScope.ServiceBaseUri + 'Map/geolocation'
  }).then(function successCallback(resp) {
    $scope.latlongdist = resp.data;
  }, function errorCallback(resp) {});
  $scope.propname[i].dist = $scope.latlongdist;
}

So all the object named dist in the list are of same value after the entire loop ends.It should be different for all properties i think before the http response the loop continues is there way to wait till the http of each loop ends and then proceed ?

don't use a $scope property as a temporary variable for the calculation of your formula. — Claies
– Claies, Commented Jul 1, 2017 at 15:03
@Claies You mean the scope where i saved the response of the http action ? — Melvin
– Melvin, Commented Jul 1, 2017 at 15:04
don't use $scope.latlongdist; If you use $scope, you should only attach to $scope properties that you actually intend to display in the HTML. Your calculations are failing because even though there are multiple sets of coordinates, every set is sharing a single output variable. — Claies
– Claies, Commented Jul 1, 2017 at 15:05
For those who are really trying to get help of similar issue try this answer.Kind of worked in my situation by just changing the $http calling method.stackoverflow.com/a/21023191/3904336 — Melvin
– Melvin, Commented Jul 1, 2017 at 15:26
as a side note, you wouldn't want every iteration of the loop to stop and wait for the $http response; that's called a blocking operation, and $http is designed to be asynchronous, non-blocking. If your loop stopped every iteration, then your script could freeze the UI . — Claies
– Claies, Commented Jul 1, 2017 at 15:26

Sébastian Guesdon · Accepted Answer · 2017-07-01 15:42:13Z

0

a better way,

var loclatlong = $scope.loclatlong,
    geolocUrl = $rootScope.ServiceBaseUri + 'Map/geolocation';

$scope.propname.forEach(function(prop, index) {

    if(prop.latlong === "") {
        var pptlatlong = (""+","+ "");
    } else {
        var pptlatlong = prop.latlong.replace(/\s*,\s*/g, ",");
    }

    var latlongdata = {
        scoord: loclatlong,
        ecoord: pptlatlong
    };

    $http({
        method: 'post',
        data: latlongdata,
        url: geolocUrl
    })
    .then(
        function(res) {
            $scope.propname[index].dist = res.data;
        },
        function(err) {
            console.log(err);
        }
    );
});

answered Jul 1, 2017 at 15:42

Sébastian Guesdon

2211 silver badge4 bronze badges

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

Comments

tiagodws · Accepted Answer · 2017-07-01 16:27:16Z

0

Everything inside your for-loop gets executed before the asynchronous call returns.

Just assign your values inside the .then, like:

$scope.propname[i].dist = response.data;

Important: the better approach would be to store all the promises inside an array and only use the propname values when all of them got resolved. That way you would ensure that you are not missing any unresolved values.

edited Jul 1, 2017 at 16:27

answered Jul 1, 2017 at 16:21

tiagodws

1,39514 silver badges22 bronze badges

4 Comments

Melvin Over a year ago

i tried assigning inside the success of $http but i got an error "dist of undefined"

tiagodws Over a year ago

You need to check why $scope.propname[i] is undefined. @Melvin

Melvin Over a year ago

because it loops before the $http response and doesn't wait for it

tiagodws Over a year ago

But based on your question, $scope.propname array items should be instantiated before the loop, that's why you iterate till i < $scope.propname.length, no? If that's not the case, show me a little bit more of your code, please. @Melvin

Collectives™ on Stack Overflow

$http call inside angular foreach loops before http response

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related