Having trouble calculating the total sum within a for loop

Question

Having trouble calculating the total sum within a for loop

I have a special function inside a loop that generates an array of objects. My goal is to calculate the total value returned by this function, but unfortunately I am not getting the correct sum. The function itself is working properly, however, I am unable to obtain the total sum. Below you can see the code snippet:

controller

var TotalOBValueLand = 0;
for(var i = 0; i < $scope.selectedProp.length; i++){
     AccountService.getTopAccountDetails($scope.selectedProp[i]["propId"]).then(function(msg){
           TotalOBValueLand += parseInt(msg.data[0].OBValueLand);
           //The data being returned shows no errors.
     });
}
console.log(TotalOBValueLand); //I always get zero;

javascript angularjs for-loop

Answer 1

Answer №1

Utilize Promise.all and array#map to retrieve an array of results, then employ Array#reduce to calculate the sum

var TotalOBValueLand = 0;
Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0].OBValueLand);
     });
})).then(function(results) {
    TotalOBValueLand = results.reduce(function(a, b) {
       return a + b; 
    });
    console.log(TotalOBValueLand);
});

Addressing the feedback received

var TotalOBValueLand = 0;
var TotalOBValueBuilding = 0;
Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0]);
     });
})).then(function(results) {
    TotalOBValueLand = results.reduce(function(a, b) {
       return a.OBValueLand + b.OBValueLand; 
    });
    TotalOBValueBuilding  = results.reduce(function(a, b) {
       return a.OBValueBuilding  + b.OBValueBuilding ; 
    });
    console.log(TotalOBValueLand, TotalOBValueBuilding);
});

Expanding on a more versatile solution

Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0]);
     });
})).then(function(results) {
    var totals = results.reduce(function(result, a) {
        Object.keys(a).forEach(function(key) {
            result[key] = (result[key] || 0) + a[key];
        });
        return result;
    }, {});
    console.log(totals.OBValueLand, totals.OBValueBuilding);
});

Answer 2

Utilize Promise.all and array#map to retrieve an array of results, then employ Array#reduce to calculate the sum

var TotalOBValueLand = 0;
Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0].OBValueLand);
     });
})).then(function(results) {
    TotalOBValueLand = results.reduce(function(a, b) {
       return a + b; 
    });
    console.log(TotalOBValueLand);
});

Addressing the feedback received

var TotalOBValueLand = 0;
var TotalOBValueBuilding = 0;
Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0]);
     });
})).then(function(results) {
    TotalOBValueLand = results.reduce(function(a, b) {
       return a.OBValueLand + b.OBValueLand; 
    });
    TotalOBValueBuilding  = results.reduce(function(a, b) {
       return a.OBValueBuilding  + b.OBValueBuilding ; 
    });
    console.log(TotalOBValueLand, TotalOBValueBuilding);
});

Expanding on a more versatile solution

Promise.all($scope.selectedProp.map(function(prop) {
     return AccountService.getTopAccountDetails(prop).then(function(msg){
           return parseInt(msg.data[0]);
     });
})).then(function(results) {
    var totals = results.reduce(function(result, a) {
        Object.keys(a).forEach(function(key) {
            result[key] = (result[key] || 0) + a[key];
        });
        return result;
    }, {});
    console.log(totals.OBValueLand, totals.OBValueBuilding);
});

Answer 3

Answer №2

Trying to access console.log(TotalOBValueLand); outside of the response won't work as .getTopAccountDetails() is an asynchronous function, resulting in it always being at 0.

To solve this issue, you can enclose it within:

var TotalOBValueLand = 0;
for(var i = 0; i < $scope.selectedProp.length; i++){
     AccountService.getTopAccountDetails($scope.selectedProp[i]["propId"]).then(function(msg){
           TotalOBValueLand += parseInt(msg.data[0].OBValueLand);
           console.log(TotalOBValueLand);  
     });
}

Answer 4

Trying to access console.log(TotalOBValueLand); outside of the response won't work as .getTopAccountDetails() is an asynchronous function, resulting in it always being at 0.

To solve this issue, you can enclose it within:

var TotalOBValueLand = 0;
for(var i = 0; i < $scope.selectedProp.length; i++){
     AccountService.getTopAccountDetails($scope.selectedProp[i]["propId"]).then(function(msg){
           TotalOBValueLand += parseInt(msg.data[0].OBValueLand);
           console.log(TotalOBValueLand);  
     });
}

Answer 5

Answer №3

One issue arises from the mixing of asynchronous and synchronous functions, leading to unexpected behavior. To better illustrate this concept, consider the following demonstration:

Demo Link

AccountService = {
  getTopAccountDetails: function() {
    return new Promise((resolve) => resolve(1))
  }
}

var TotalOBValueLand = 0;
for(var i = 0; i < 2; i++){
     AccountService.getTopAccountDetails().then(function(x){
       TotalOBValueLand += x;
       console.log('async increment', TotalOBValueLand)
     });
}
console.log('sync', TotalOBValueLand);
setTimeout(() => 
console.log('timeout', TotalOBValueLand), 2000)

A better solution involves utilizing an array of promises that can be resolved together:

var TotalOBValueLand = 0;
promises = []
for(var i = 0; i < 2; i++){
  promise = AccountService
    .getTopAccountDetails()
  promises.push(promise)
}
console.log('before', TotalOBValueLand);

Promise
  .all(promises)
  .then(results => {
    TotalOBValueLand = results.reduce((curr,acc) => curr + acc, 0);
    console.log('completed', TotalOBValueLand);
    return TotalOBValueLand;
  })
  .catch(err => 'handle me')

Answer 6

One issue arises from the mixing of asynchronous and synchronous functions, leading to unexpected behavior. To better illustrate this concept, consider the following demonstration:

Demo Link

AccountService = {
  getTopAccountDetails: function() {
    return new Promise((resolve) => resolve(1))
  }
}

var TotalOBValueLand = 0;
for(var i = 0; i < 2; i++){
     AccountService.getTopAccountDetails().then(function(x){
       TotalOBValueLand += x;
       console.log('async increment', TotalOBValueLand)
     });
}
console.log('sync', TotalOBValueLand);
setTimeout(() => 
console.log('timeout', TotalOBValueLand), 2000)

A better solution involves utilizing an array of promises that can be resolved together:

var TotalOBValueLand = 0;
promises = []
for(var i = 0; i < 2; i++){
  promise = AccountService
    .getTopAccountDetails()
  promises.push(promise)
}
console.log('before', TotalOBValueLand);

Promise
  .all(promises)
  .then(results => {
    TotalOBValueLand = results.reduce((curr,acc) => curr + acc, 0);
    console.log('completed', TotalOBValueLand);
    return TotalOBValueLand;
  })
  .catch(err => 'handle me')

Having trouble calculating the total sum within a for loop

Answer №1

Answer №2

Answer №3

Similar questions

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Seamlessly transition between various states within a React component for a fluid user experience

In VueJS, where specifically do you typically look to catch emitted events?

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

The art of defining PropTypes for the style attribute in Reactjs

Enable Class exclusively on upward scrolling on the browser

Jasmine tests for AngularJS directive failed to invoke the link function

Arranging Functions in JavaScript

ReactJS bug: Array rendering problem affected by recent changes

The ion-input border seems to be fluctuating as the keyboard appears on the screen

Search timeout restriction

Sending angularjs form data to nodejs Express (Failure in request)

Using HTTPS, you can access Flask from AJAX

Preventing Bidirectional Binding in AngularJS: A Step-by-Step Guide

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

When the onClick event is triggered, my intention is to dynamically insert a new

Loop through the input template using ng-repeat with various data types

Error in the Angular-UI calendar

both modules loading at the same time in AngularJS

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop