getting sum of grouped data angularjs - angular-filter

问题

i am using angular-filter to group data. while i was able to group data and get data length(orderfood), i am not able to get sum of the qty in my grouped data. my plunk demo

the result i got

Isnain Meals - 2

Chicken Burger - 2

the result i need

Isnain Meals - 4 //sum of qty of Isnain Meals from JSON data (1+3)

Chicken Burger - 9 //sum of qty of Chicken Burger from JSON data (3+6)

JSON Data

$scope.orders = [{
  "_id": "56b0c315e179bb0e00a44dbf",
  "orderfood": [{
    "_id": "569d865bff1fe20e00f8ba97",
    "qty": "1",
    "confirm": true,
    "price": 154,
    "name": "Isnain Meals"
  }, {
    "_id": "569d865bff1fe20e00f8ba98",
    "qty": "3",
    "confirm": true,
    "price": 154,
    "name": "Isnain Meals"
  }],
  "content": "9176649143",
  "created": "2016-02-02T14:54:13.926Z"
}, {
  "_id": "56b06ed25b53250e00ccbd73",
  "orderfood": [{
    "_id": "569d84f04834c10e003dff36",
    "qty": "6",
    "confirm": true,
    "price": 125,
    "name": "Chicken Burger"
  }],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
}, {
  "_id": "56b06ed25b53250e00ccbd74",
  "orderfood": [{
    "_id": "569d84f04834c10e003dff37",
    "qty": "3",
    "confirm": true,
    "price": 125,
    "name": "Chicken Burger"
  }],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
}];

Controller Code

$scope.getOrderFoods = function() {
var orderfood = [];

angular.forEach($scope.orders, function(order) {
  angular.forEach(order.orderfood, function(orderfoo) {
    if (orderfood.indexOf(orderfoo) == -1) {
      orderfood.push(orderfoo);
    }
  })
});
return orderfood;
}

HTML

<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
  <p>{{key}} - {{data.length}}</p>
<!-- instead of the data.length, i need the sum of qty   -->
</div>

my plunk demo

回答1:

You can use javascript Array.reduce method to generate the sum of quantity. here is the Plunk

<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
      <p>{{key}} - {{reduce(data)}}</p>
</div>


$scope.reduce= function(data){
   return data.reduce(function(previousValue,currentValue, currentIndex, array){
     return previousValue + parseInt(currentValue.qty);
  }, 0);
}

回答2:

In your solution used data.length that return array length not total qty because of groupBy generate an array based on groupBy conditioncan.

<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
  <p>{{key}} - {{data.length}}</p>
</div>

in this repeat generate two array with two items in each array because of you have two type item name and each type two times.

You can use another function to calculate total quantity that will call from in ng-repeat. In my solution used getTotalQuantity(data)

likeIn html:

<div ng-repeat="(key,data) in getOrderFoods() | groupBy:'name'">
   <p>{{key}} - {{getTotalQuantity(data)}}</p>
</div>

in controller:

$scope.getTotalQuantity = function(items) {
    var total =0;
    angular.forEach(items, function(item) {
       total+= parseInt(item.qty);
    });
    return total;
}

来源：https://stackoverflow.com/questions/36156325/getting-sum-of-grouped-data-angularjs-angular-filter

标签

javascript

angularjs

angular-filters