AngularJS : How to sum similar variables from multilpe arrays

Question

Please see what I need to do at the end of this question.

I have the following relationship between Category and Products (1-n).

This is the html table with the inventory

<table>
<thead>
    <tr>
        <th>#</th>
        <th>Category</th>
        <th>Products quantity</th>
    </tr>   
</thead>
<tbody>
    <tr data-ng-repeat="category in categories" data-ng-repeat="getProductsByCategory(category)">
        <td>{{category.name}}</td>
        <td>{{products[category.id] | sumByKey:'quantity'}}</td>
    </tr>
</tbody>
<tfooter>
    <tr>
        <td colspan="2">total</td>
        <td></td>
    </tr>
</footer>

And this is the result, as you can see I'm using the 'sumByKey' filter in order to get the sum of all products by its category

The respective function to get all products by its category

$scope.products = [];
$scope.getProductsByCategory = function(category){
    $http.get("getProductsByCategory/"+category.id)
    .success(function (data, status, headers, config) {
        $scope.products[category.id] = data;
    })
    .error(function (data, status, header, config) {
        $log.error("Error");
    });
};

And the filter to sum all quantities

app.filter("sumByKey", function() {
    return function(data, key) {
    if (typeof(data) === 'undefined' || typeof(key) === 'undefined') {
        return 0;
    }
    var sum = 0;
    for (var i = data.length - 1; i >= 0; i--) {
        sum += parseInt(data[i][key]);
    }
    return sum;
    };
});

In order to get the total in the inventory table I have been trying to use the same filter (sumByKey) but it doesn't work. Any idea to get the respective result?

As it appears you're making an Api call, I would highly recommend doing this in the database, in your stored procedure call or view. Then you can bring it down as part of your response data. — Yatrix
– Yatrix, Commented Nov 21, 2016 at 1:28
stackoverflow.com/a/40697761/3279156 ----- This can help you — sreeramu
– sreeramu, Commented Nov 21, 2016 at 1:37

Yatrix · Accepted Answer · 2016-11-21 01:36:16Z

2

What you can do is call the filter in the controller and add the results to a total.

$scope.total = 0;

$scope.sum = function(value) {
    var results = // sum returned by your filter;

    // maintains count of all category sums
    $scope.total += results;

    // amount that goes back to the view
    return results; 
}

Then just bind $scope.total to your view.

<td>{{products[category.id] | sum('quantity')}}</td>

answered Nov 21, 2016 at 1:36

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KarateJB · Accepted Answer · 2016-11-21 02:04:19Z

0

Seems that $scope.products will be [ProductArrayCat1, ProductArrayCat2,ProductArrayCat3]

So all you have to do is throw the 3 arrays to the sumByKey filter respectively.

<tfooter>
<tr>
    <td colspan="2">total</td>
    <td>{{total}}</td>
</tr>

$scope.total=0;
$scope.getProductsByCategory $scope.getProductsByCategory= function(category){
$http.get("getProductsByCategory/"+category.id)
.success(function (data, status, headers, config) {
    $scope.products[category.id] = data;
    $scope.total += $filter('sumByKey')(data,'quantity');
});
};

answered Nov 21, 2016 at 2:04

KarateJB

9612 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS : How to sum similar variables from multilpe arrays

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related