Grouping in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 864 red flag

Grouping of data is a very common requirement in many applications.In this article, we will look into grouping of AngularJS.


 Download source code for Grouping in 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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)