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.

Jenny · Accepted Answer · 2017-05-20 07:11:41Z

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>

Sajeetharan · Accepted Answer · 2017-05-20 07:18:13Z

1

DEMO

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($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
  }];
  
  $scope.calculatetotal = function(arrayGrouped){
       var total = 0;
       arrayGrouped.forEach(function(key,value){
              total+=key.quantity;
       });
       return total;
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
<body ng-app="myApp">
    <div>
        <div data-ng-controller="SimpleController">
          <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.date | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{calculatetotal(log)}}</td>
                        <td>total of quantity</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        </div>
    </div>
</body>

</html>

edited May 20, 2017 at 7:18

answered May 20, 2017 at 6:58

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Raghav Over a year ago

I want to display the total quantity based on date for eg., total quantity for 18-may-2017 will be 50 + 6 = 56.. Your solution is not doing this..

Raghav Over a year ago

Thanks for your answer @Sajeetharan

Collectives™ on Stack Overflow

How to add the group by data in AngularJS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related