getting sum of grouped data angularjs - angular-filter

Question

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

Naeem Shaikh · Accepted Answer · 2016-03-22 14:04:16Z

3

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);
}

answered Mar 22, 2016 at 14:04

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

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

Comments

Shaishab Roy · Accepted Answer · 2016-03-22 14:59:37Z

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;
}

Collectives™ on Stack Overflow

getting sum of grouped data angularjs - angular-filter

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