$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, Jul 01 '17 at 15:03
@Claies You mean the scope where i saved the response of the http action ? — Melvin, Jul 01 '17 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, Jul 01 '17 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.https://stackoverflow.com/a/21023191/3904336 — Melvin, Jul 01 '17 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, Jul 01 '17 at 15:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148126/discussion-between-melvin-and-claies). — Melvin, Jul 01 '17 at 15:28

score 0 · Answer 1 · answered Jul 01 '17 at 15:42

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);
        }
    );
});

tiagodws · Answer 2 · 2017-07-01T16:27:16.853

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 01 '17 at 16:27

answered Jul 01 '17 at 16:21

tiagodws

1,345
13
20

i tried assigning inside the success of $http but i got an error "dist of undefined" – Melvin Jul 02 '17 at 06:52
You need to check why `$scope.propname[i]` is undefined. @Melvin – tiagodws Jul 02 '17 at 17:38
because it loops before the $http response and doesn't wait for it – Melvin Jul 03 '17 at 04:07
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 – tiagodws Jul 03 '17 at 12:17

$http call inside angular foreach loops before http response

2 Answers2