I have an array of items that I'm repeating over using ng-repeat and am using group filter
this is my array
var items = [
{ product_id : 1, quantity : 2 }
{ product_id : 1, quantity : 3 }
{ product_id : 2, quantity : 2 }
{ product_id : 3, quantity : 4 }
{ product_id : 2, quantity : 8 }
];
I would like an ng-repeat that results in the following presentation
| product_id 1 | quantity 5 |
| product_id 2 | quantity 10 |
| product_id 3 | quantity 4 |
Any suggestions?
Although it's old question I saw that I can answer this more clearly.
I'm using angular-filter module to get groupBy filter.
angular.module('app', ['angular.filter']).
controller('ctrl', function($scope) {
$scope.data = [
{ product_id : 1, quantity : 2 },
{ product_id : 1, quantity : 3 },
{ product_id : 2, quantity : 2 },
{ product_id : 3, quantity : 4 },
{ product_id : 2, quantity : 8 }
];
}).
filter('total', function() {
return function(arr, prop) {
return arr.reduce(function(previousValue, currentObj) {
return previousValue + currentObj[prop];
}, 0);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<div data-ng-repeat="(key, value) in data | groupBy : 'product_id'">
| product_id {{key}} | quantity {{value | total: 'quantity'}}
</div>
</div>Update
There is a better way to calc the sum of each group thanks, again, to angular-filter (and @toddbranch). To calculate the total you can use map and sum filter. like this:
{{value | map: 'quantity' | sum}}
And the full demo:
angular.module('app', ['angular.filter']).
controller('ctrl', function($scope) {
$scope.data = [
{ product_id : 1, quantity : 2 },
{ product_id : 1, quantity : 3 },
{ product_id : 2, quantity : 2 },
{ product_id : 3, quantity : 4 },
{ product_id : 2, quantity : 8 }
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<div data-ng-repeat="(key, value) in data | groupBy : 'product_id'">
| product_id {{key}} | quantity {{value | map: 'quantity' | sum}}
</div>
</div>Trying nesting the ng-repeat tag in the html tags like so,
<div ng-repeat 1>
<div ng-repeat 2>
<!-- where you need the data -->
</div>
</div>
You need to create your own filter. Need some work on below filter to get the addition of quantity with same product_id.
Markup
<div ng-repeat="i in items | orderBy: 'product_id' |groupBy:'product_id':'quantity'">
{{i.product_id}}| {{i.quantity}}
</div>
Filter
app.filter('groupBy', function() {
return function(values, property1, property2) {
var groupByArray = [];
console.log("Initialize");
angular.forEach(values, function(value, index) {
var lengthOfGroupBy = groupByArray.length;
if (lengthOfGroupBy == 0 || groupByArray[lengthOfGroupBy - 1][property1] != value[property1]) {
groupByArray.push(value);
}
});
return groupByArray;
}
});
UPDATE
I tried further and successfully implement the thing which you want, it works but there is error in console which says "Error: 10 $digest() iterations reached. Aborting!”
Here is my Updated Fiddle with error in console.
I found the solution on SO that works for same problem.
