How to add the group by data in AngularJS?

Question

I have an array of objects which consists of quantity and date as shown below

$scope.items = [
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 50,
    "id": 5
  },
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 6,
    "id": 7
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 50,
    "id": 11
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 30
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 31
  }
];

And am applying the groupBy on the date as shown below,

    <div class="row" ng-repeat="log in items | groupBy: 'date'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log">
                        <td>{{item.updatedAt | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{item.quantity}}</td>
                        <td>total of quantity</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Here, how can i add the quantity of the grouped by objects and display. for eg., total quantity for 18-may-2017 will be 50 + 6 = 56.

Answer 1

See this :

var MyApp = angular.module("MyApp",['angular.filter']);
MyApp.controller("MyCtrl",['$scope',MyCtrl]);
function MyCtrl($scope) {
$scope.items = [
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 50,
    "id": 5
  },
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 6,
    "id": 7
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 50,
    "id": 11
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 30
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 31
  }
];
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div class="row" ng-repeat="log in items | groupBy: 'date'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Quantity</th>
                        <th>Total Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log">
                    
                        <td>{{item.date | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{log | map : 'quantity' | sum }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>