获取分组数据的总和 angularjs - angular-filter

Question

我正在使用 angular-过滤器对数据进行分组。虽然我能够对数据进行分组并获取数据长度 (orderfood)，但我无法在我的分组数据中获取 qty 的总和。我的 plunk demo

我得到的结果

Isnain Meals - 2

Chicken Burger - 2

我需要的结果

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数据

$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"
}];

控制器代码

$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>

我的plunk demo

Answer 1

您可以使用javascript Array.reduce 方法生成数量总和。这是 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);
}

Answer 2

在您的解决方案中使用 data.length return 数组长度不是总长度 qty 因为 groupBy 可以根据 groupBy 条件生成数组。

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

在此重复生成两个数组，每个数组中有两个项目，因为您有两个类型的项目名称和每个类型两次。

您可以使用另一个函数来计算 ng-repeat 中调用的总数量。在我的解决方案中使用 getTotalQuantity(data)

likeIn html:

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

在控制器中：

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

获取分组数据的总和 angularjs - angular-filter

getting sum of grouped data angularjs - angular-filter

javascript

angularjs

angular-filters