Introduction
Many times when using AngularJS, we require a functionality to display the data in a table with a group by format.
Here, I will show you how we can achieve the same.
Preview
Group By using "Location" column:
| Before | After |
|---|---|
 |  |
Prerequisites
To achieve this functionality, we require following:
- Reference to latest AngularJS 1.0 version from CDN link
- Reference to latest Angular Filter version from CDN link
Code
Let's say we have a normal "Employees" array which has a data as below:
var Employees = [{
"Name": "Sunny",
"Technology": "SharePoint",
"Location": "India"
}, {
"Name": "John",
"Technology": "Dot Net",
"Location": "USA"
}, {
"Name": "Rachel",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Harman",
"Technology": "C#",
"Location": "India"
}, {
"Name": "Suzy",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Sheena",
"Technology": "PHP",
"Location": "India"
}];
The array has three properties:
- Name
- Technology
- Location
Our AngularJS code looks like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var angularApp = angular.module("angularApp", []);
angularApp.controller("angularCtrl", function ($scope) {
var Employees = [{
"Name": "Sunny",
"Technology": "SharePoint",
"Location": "India"
}, {
"Name": "John",
"Technology": "Dot Net",
"Location": "USA"
}, {
"Name": "Rachel",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Harman",
"Technology": "C#",
"Location": "India"
}, {
"Name": "Suzy",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Sheena",
"Technology": "PHP",
"Location": "India"
}];
$scope.Employees = Employees;
});
</script>
As we can see, in above code we have module as "angularApp" and controller as "angularCtrl".
We have declared the "Employee" variable and added few records in it and then finally bind it with $scope.
We have declared the "Employee" variable and added few records in it and then finally bind it with $scope.
Here, is how our initial markup looks like:
<body ng-app="angularApp">
<div ng-controller="angularCtrl">
<table>
<thead>
<tr>
<th>Name
</th>
<th>Technology
</th>
<th>Location
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="employee in Employees">
<td>{{employee.Name}}
</td>
<td>{{employee.Technology}}
</td>
<td>{{employee.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
In the above markup, you could see that I have given the module name in <body> tag and controller name in a <div> tag for this example and added them to a table with all the three columns.
In, <tbody> tag, in <tr> tag, I am using ng-repeat to display the data.
The data will look like below:
Now, I want to group this data with "Location" column.
Solution
Here, are the following steps to group by data in AngularJS.
Step 1:
We will refer "angular-filter" JS file in my code and also we will add 'angular.filter' in module definition array parameter so that our AngularJS code will look like below:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.min.js"></script>
<script type="text/javascript">
var angularApp = angular.module("angularApp", ['angular.filter']);
angularApp.controller("angularCtrl", function ($scope) {
var Employees = [{
"Name": "Sunny",
"Technology": "SharePoint",
"Location": "India"
}, {
"Name": "John",
"Technology": "Dot Net",
"Location": "USA"
}, {
"Name": "Rachel",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Harman",
"Technology": "C#",
"Location": "India"
}, {
"Name": "Suzy",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Sheena",
"Technology": "PHP",
"Location": "India"
}];
$scope.Employees = Employees;
});
</script>
Step 2:
We will also modify our markup so that it will look like below:
<body ng-app="angularApp">
<div ng-controller="angularCtrl">
<table>
<thead>
<tr>
<th>Name
</th>
<th>Technology
</th>
<th>Location
</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in Employees | groupBy: 'Location'">
<tr>
<td colspan="3">
<strong>{{key}}</strong>
</td>
</tr>
<tr ng-repeat="val in value">
<td>{{val.Name}}
</td>
<td>{{val.Technology}}
</td>
<td>{{val.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
As we can see above code that we have two ng-repeat in our markup code i.e. one is in <tbody> tag and another one in <tr> tag.
In the first ng-repeat, the key and value will loop through the Employees array and then filter it by "Location" column and the key will retain the location column value.
This we will display in our first row with AngularJS expression i.e.
In the second ng-repeat, value will retain other properties information so will fetch that and display in the next row using AngularJS expression i.e.
The result will look like below:
Note: If we want to GroupBy data using any other column i.e. either by "Technology" or "Name", to do the same, we will replace "Location" with the other column name.
For e.g., if we want to Group By the data with "Technology" column, we will replace this:
<tbody ng-repeat="(key, value) in Employees | groupBy: 'Location'">
With this:
<tbody ng-repeat="(key, value) in Employees | groupBy: 'Technology'">
With above replacement, data will look like below:
Complete Code
Here is the complete code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
padding:5px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.min.js"></script>
<script type="text/javascript">
var angularApp = angular.module("angularApp", ['angular.filter']);
angularApp.controller("angularCtrl", function ($scope) {
var Employees = [{
"Name": "Sunny",
"Technology": "SharePoint",
"Location": "India"
}, {
"Name": "John",
"Technology": "Dot Net",
"Location": "USA"
}, {
"Name": "Rachel",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Harman",
"Technology": "C#",
"Location": "India"
}, {
"Name": "Suzy",
"Technology": "Java",
"Location": "USA"
}, {
"Name": "Sheena",
"Technology": "PHP",
"Location": "India"
}];
$scope.Employees = Employees;
});
</script>
</head>
<body ng-app="angularApp">
<div ng-controller="angularCtrl">
<table>
<thead>
<tr>
<th>Name
</th>
<th>Technology
</th>
<th>Location
</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in Employees | groupBy: 'Technology'">
<tr>
<td colspan="3">
<strong>{{key}}</strong>
</td>
</tr>
<tr ng-repeat="val in value">
<td>{{val.Name}}
</td>
<td>{{val.Technology}}
</td>
<td>{{val.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Conclusion
So, in this post we learnt how to use AngularJS and AngularJS-Filter JS files to group by the data in an array. Hope this will help you!
