A method for calculating the total value of a particular attribute within an ng-repeat loop

Question

A method for calculating the total value of a particular attribute within an ng-repeat loop

I am trying to develop a function that can calculate the total value of a specific property retrieved from a JSON web service.

Here is my function:

$scope.exportData = data;

$scope.totalLW = function() {
    $scope.total=0;

    for (var i = 0; i < $scope.exportData.result.merchMetrics.SALES_AMOUNT_LW.length; i++) {
        $scope.total += parseFloat($scope.exportData.result.merchMetrics.SALES_AMOUNT_LW);
    }

    return $scope.total;
}

I am calling this function in my HTML view like this:

<td ng-class = "{'positive':totalLW() >= 0, 'negative': totalLW()}">{{totalLW()}}</td>

However, I am encountering an undefined error in my view. I suspect there might be an issue with my function implementation and need assistance in identifying the problem.

The variable $scope.exportData seems to be functioning properly as the table binding is working correctly.

Attached below is a screenshot:

https://i.sstatic.net/KMIED.png

javascript angularjs

Answer 1

Answer №1

It appears that you overlooked using array values in a for loop.

 $scope.totalLW = function (){
          $scope.total=0;
          for(var i =0; i < $scope.exportData.result.merchMetrics.SALES_AMOUNT_LW.length; i++ ) {

         $scope.total += parseFloat($scope.exportData.result.merchMetrics.SALES_AMOUNT_LW**[i]**);
       }
       return $scope.total;
    }

After further investigation, I discovered the point that was missed. You should iterate through

for (var i =0; i <$scope.exportData.result.length; i++)

on $scope.exportData.result not on $scope.exportData.result.merchMetrics.SALES_AMOUNT_LW

Answer 2

It appears that you overlooked using array values in a for loop.

 $scope.totalLW = function (){
          $scope.total=0;
          for(var i =0; i < $scope.exportData.result.merchMetrics.SALES_AMOUNT_LW.length; i++ ) {

         $scope.total += parseFloat($scope.exportData.result.merchMetrics.SALES_AMOUNT_LW**[i]**);
       }
       return $scope.total;
    }

After further investigation, I discovered the point that was missed. You should iterate through

for (var i =0; i <$scope.exportData.result.length; i++)

on $scope.exportData.result not on $scope.exportData.result.merchMetrics.SALES_AMOUNT_LW

Answer 3

Answer №2

Before the data is available, the view will execute that function.

This means that you may try to access properties of an object that does not yet exist during the initial view setup, resulting in errors.

An alternative approach could be to simply wait for the data instead of using a function within the view.

Once the data is received, you can utilize Array.prototype.reduce() to calculate the total:

$scope.total =  data.result.merchMetrics.SALES_AMOUNT_LW.reduce(function(total, curr){
   total += (parseFloat(curr.SALES_AMOUNT_LW) || 0); 
   return total;
},0)

View

<td ng-class = "{'positive':total, 'negative': total < 0}">{{total || 0}}</td>

Answer 4

Before the data is available, the view will execute that function.

This means that you may try to access properties of an object that does not yet exist during the initial view setup, resulting in errors.

An alternative approach could be to simply wait for the data instead of using a function within the view.

Once the data is received, you can utilize Array.prototype.reduce() to calculate the total:

$scope.total =  data.result.merchMetrics.SALES_AMOUNT_LW.reduce(function(total, curr){
   total += (parseFloat(curr.SALES_AMOUNT_LW) || 0); 
   return total;
},0)

View

<td ng-class = "{'positive':total, 'negative': total < 0}">{{total || 0}}</td>

A method for calculating the total value of a particular attribute within an ng-repeat loop

Answer №1

Answer №2

Similar questions

Unsyncing your GIFs

Having trouble getting ngAnimate to work properly?

Implementing dynamic controls in an ASP.NET MVC5 application using AngularJS

Troubleshooting: Issues with AngularJS Data Binding in HTML Tables

The inline variables in CSS transitions are failing to be detected

Create a fresh array by merging two existing arrays together

Removing elements from an array based on a specified condition

Increase the value of count (an AJAX variable) by 4 upon clicking the button, then send it over to the PHP script

What is the most effective method for storing multiple data points in an array?

AdminLTE-3 Bootstrap-4 sidebar menu with dynamic AJAX functionality fails to toggle treeview open/hide after page is fully loaded

Utilizing jQuery to dynamically convert a dropdown into a multiselect when triggered by the selection of another dropdown within a form containing cloned

Recognize when the DOM undergoes modifications

Adjusting the height of a vertical slider in Vuetify2 is not customizable

Is there a correct way to properly duplicate a JSON array in Redux?

React Native Navigation Issue: The route's component must be a valid React Component

Ways to select a random row from a MySQL database

How can a web developer prevent image caching in HTML5 for optimal performance?

Jquery and Magento Prototype causing conflicts

Is there a way to accurately determine the width of a DOM element in a ReactJS application?

Steps for writing code to append and execute code snippets using values from a JSON dataset