Grouping of data is a very common requirement in many applications.In this article, we will look into grouping of AngularJS.
Introduction
Grouping of data is a very common requirement in many applications. Let us say we have some records as shown below.
In this article, we will look into grouping of AngularJS.
The final output should be
Using the code
Let us first present the json data. Let's first create the grpController.js controller and add the below code
//create an application module
var grpAppModule = angular.module('grpApp',['angular.filter']);
//The below code will read the json data from dataSource and will pass to the $scope.branchData variable
grpAppModule.controller("grpCtrl", function($scope){
var dataSource = [{branch: 'Branch1', month: '10',amount:'2000'},
{branch: 'Branch2', month: '11',amount:'3000'},
{branch: 'Branch1', month: '10',amount:'3000'},
{branch: 'Branch2', month: '10',amount:'3000'},
{branch: 'Branch3', month: '12',amount:'4000'},
{branch: 'Branch2', month: '12',amount:'5000'},
{branch: 'Branch1', month: '12',amount:'6000'}
];
$scope.branchData = dataSource;
});//end controller
At first we are creating the dataSource and then assigning it to $scope.branchData.
The $scope.branchData variable acts as a glue for carrying the data from the controller to the view (i.e. index.html part).
Now once the controller is ready, it's time to bind the data to the view. So let's create the below html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="grpController.js"></script>
</head>
<body ng-app="grpApp">
<div ng-controller="grpCtrl" align="center">
<h2>Presenting Branch Records without Grouping</h2>
<table border="1">
<tr>
<th>Branch</th>
<th>Month</th>
<th>Amount Collected</th>
</tr>
<tr ng-repeat="branchItems in branchData | orderBy : '[branch,month]'">
<td>{{ branchItems.branch }}</td>
<td>{{ branchItems.month }}</td>
<td>{{ branchItems.amount }}</td>
</tr>
</table>
</div>
</body>
</html>
The resultant output is
The above code reflects the rudimentary record being passed from the controller and presented it after sorting by branch and month
We need to apply grouping of those records such that the final records should be a subset of branch and month and the amount collected per such subset (branch and month).
Inorder to do that, let's add the below piece of code
<tr ng-repeat="(key, branchItems) in branchData | orderBy : '[branch,month]' | groupBy: '[branch,month]' ">
<td>{{ branchItems[0].branch }}</td>
<td>{{ branchItems[0].month }}</td>
<td>{{ sumOfAmountCollected(branchItems) }}</td>
</tr>
The groupBy filter does the trick. The code states that, for each item, sort them first by branch and month and then group by branch and month. The sumOfAmountCollected function is coded as under
//sum the Amount Collected
$scope.sumOfAmountCollected = function(branchItems) {
return branchItems
.map(function(x) { return x.amount; })
.reduce(function(a, b) { return a -(-b); });};
The map function loops through the original array(here branchItems) in ascending order and calls the method for each value in the array. It the collects the results of the function to create a new array object with the results obtained. The reduce function accepts an array as an input, acts on the individual elements from left to right and computes them in such a way so as to reduce them to a scalar/single value and returns the output.
We are presenting the Map and Reduce function of Javascript article here for the sake of understanding.
The resultant output is
The complete code is presented below
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<script src="grpController.js"></script>
</head>
<body ng-app="grpApp">
<div ng-controller="grpCtrl" align="center">
<h2>Presenting Branch Records without Grouping</h2>
<table border="1">
<tr>
<th>Branch</th>
<th>Month</th>
<th>Amount Collected</th>
</tr>
<tr ng-repeat="branchItems in branchData | orderBy : '[branch,month]'">
<td>{{ branchItems.branch }}</td>
<td>{{ branchItems.month }}</td>
<td>{{ branchItems.amount }}</td>
</tr>
</table>
<h2>Presenting Branch Records with Grouping</h2>
<table border="1">
<tr>
<th>Branch</th>
<th>Month</th>
<th>Amount Collected</th>
</tr>
<tr ng-repeat="(key, branchItems) in branchData | orderBy : '[branch,month]' | groupBy: '[branch,month]' ">
<td>{{ branchItems[0].branch }}</td>
<td>{{ branchItems[0].month }}</td>
<td>{{ sumOfAmountCollected(branchItems) }}</td>
</tr>
</table>
</div>
</body>
</html>
Conclusion
This article taught us how to use groupBy filter of AngularJS to perform grouping of records. Hope this will be helpful. Thanks for reading.Zipped file is attached herewith.