"Utilizing $http requests within Angular forEach loops prior to receiving the HTTP response

Question

"Utilizing $http requests within Angular forEach loops prior to receiving the HTTP response

In my JavaScript code, I am working with a list called $scope.propname that contains an object named latlong. My goal is to calculate the distance of all properties from a specific location. This is the approach I have taken:

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

After running this loop, I noticed that all objects named dist in the list have the same value. I believe this is because the loop continues before each HTTP response has finished. Is there a way to pause the loop until each HTTP request completes before proceeding?

javascript angularjs arrays

Answer 1

Answer №1

a more efficient method,

let locationCoordinates = $scope.locationCoordinates,
    geoLocationUrl = $rootScope.ServiceBaseUri + 'Map/geolocation';

$scope.propertyList.forEach(function(property, index) {

    let propertyCoordinates = (property.coordinates === "") ? (""+","+ "") : property.coordinates.replace(/\s*,\s*/g, ",");

    let coordinatesData = {
        startCoordinates: locationCoordinates,
        endCoordinates: propertyCoordinates
    };

    $http({
        method: 'post',
        data: coordinatesData,
        url: geoLocationUrl
    })
    .then(
        function(response) {
            $scope.propertyList[index].distance = response.data;
        },
        function(error) {
            console.log(error);
        }
    );
});

Answer 2

a more efficient method,

let locationCoordinates = $scope.locationCoordinates,
    geoLocationUrl = $rootScope.ServiceBaseUri + 'Map/geolocation';

$scope.propertyList.forEach(function(property, index) {

    let propertyCoordinates = (property.coordinates === "") ? (""+","+ "") : property.coordinates.replace(/\s*,\s*/g, ",");

    let coordinatesData = {
        startCoordinates: locationCoordinates,
        endCoordinates: propertyCoordinates
    };

    $http({
        method: 'post',
        data: coordinatesData,
        url: geoLocationUrl
    })
    .then(
        function(response) {
            $scope.propertyList[index].distance = response.data;
        },
        function(error) {
            console.log(error);
        }
    );
});

Answer 3

Answer №2

Every operation within your for-loop is executed prior to the completion of the asynchronous call.

To address this, simply assign your values inside the .then function, like so:

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

It is crucial to note: a more effective approach would involve storing all the promises in an array and accessing the propname values only after they have all been resolved. This will guarantee that no unresolved values are missed.

Answer 4

Every operation within your for-loop is executed prior to the completion of the asynchronous call.

To address this, simply assign your values inside the .then function, like so:

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

It is crucial to note: a more effective approach would involve storing all the promises in an array and accessing the propname values only after they have all been resolved. This will guarantee that no unresolved values are missed.

"Utilizing $http requests within Angular forEach loops prior to receiving the HTTP response

Answer №1

Answer №2

Similar questions

How to use jQuery to update the href attribute of a parent link

React: Selecting Component Name Based on Provided Property

What is the best way to identify identical companies, consolidate them into a single entity, and combine their weights for a more

Creating a simulated callback function using Jest with a promise

Contrast between utilizing i < strlen() and str[i] not equal to ''

What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

Executing ts-node scripts that leverage imported CSS modules

Node functions continue to run smoothly without affecting the loop

Transform the snake code by incorporating a visual image as the face of the serpent

How can we use Mongoose .find to search with an array stored in req.params and respond with an array containing each value along with its

What are the steps to activate the hot-swapping feature for HTML and JavaScript files in IntelliJ's Community edition?

What is the best way to utilize getInitialProps specifically during the building process of a NextJS site?

What steps are involved in setting up a Typescript-based custom Jest environment?

Error: Cannot execute 'x' as a function

What is the method for accessing a selector within a foreach loop?

Comparison Between Object and Array

Retrieving JSON data from outside the React root directory

Choose a navigation item from the list containing a nested span element

The object does not contain a 'navigation' property within the 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' type

The error occurs when Facebook and Twitter iframes are attempting to access and set 'document.domain'