How to Sum a Json Array value in AngularJS ng-repeat

Question

I want to sum the product count which are added dynamically using JSON array.

               <tr ng-repeat="(key,val) in form.products">
                    <td>{{ProductName(key)}}</td>
                    <td >
                        <input type="text" name="products" ng-model="form.products[key]" class="form-control">
                    </td>
                </tr>

How can I get the sum of products in the above example?

get the count in the controller and make it available in $scope for the template to use in the ng-repeate — gimbel0893, Feb 19 '16 at 20:36
I tried this $scope.calculateSum = function () { var sum = 0; for (var i = 0; i < $scope.products.length; i++) { sum += parseFloat($scope.products[i]); } return sum; } but not working , I called in the template like . I am new to angular JS — Robin, Feb 19 '16 at 20:45

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

use lodash

presuming the value you want to sum is in a property called 'price':

{{_(form.products).mapValues('price').sum()}}

you may need to get lodash into your scope first. In the controller, something like:

scope._ = _;

or this approach

edited May 23 '17 at 11:45

Community

1
1

answered Feb 19 '16 at 20:43

Eric Hartford

16,464
4
33
50

Is it not possible without using lodash? I don't have any property value my array looks like {"1":20,"2":15,"3":5}, product code and product price – Robin Feb 19 '16 at 21:14

score 0 · Answer 2 · answered Feb 20 '16 at 10:26

you are using an 'object with properties' instead of 'an array of objects', that is why you cant use your example above , $scope.products.length;....

Your product object with its properties :

$scope.products ={
"1":"20",//property 1 with value 20
"2":"35",//property 2 with value 35
"3":"150"//property 3 with value 150
}

The data Object (object with properties as you have it):

 $scope.myData = {"1":120,"2":250,"3":500};

Function that iterates into object's properties and sum the price:

//read object properties and sum price
    $scope.calculateSum = function(data){
    var sum=0;  
    var counter=0;
     for (var property in data) {
       if (data.hasOwnProperty(property)) {
          sum += data[property];
          counter++;
       }
     }
     return sum;
    };

Function that iterates into object properties and count the products

//read object properties and count the products
   $scope.countProducts = function(data){
    var counter=0;
     for (var property in data) {
       if (data.hasOwnProperty(property)) {
          counter++;
       }
     }
     return counter;
    };

Into your HTML template:

  <table>
  <tr ng-repeat="(key,value) in myData track by $index">
   <td>
        <input type="text" name="id" ng-model="key" class="form-control">
  </td>
   <td>      
      <input type="text" name="price" ng-model="value" class="form-control">            
   </td>
  </tr>
  <tr>
    <td>Products: {{countProducts(myData)}}</td>
    <td>Sum: {{calculateSum(myData)}}</td>
  </tr>
  </table>

I have done a live example that counts the products and also sum the products price: http://plnkr.co/edit/FmJhvV?p=preview

Hope helps, good luck.

How to Sum a Json Array value in AngularJS ng-repeat

2 Answers2