Sorting in AngularJS

Introduction

Sorting of data is a very common requirement in any application. Suppose we have the below JSON

[
 {    
    "zone": "SOUTH",
    "state": "MAHARASHTRA",
    "city": "SANGAMNER",
    "branchName": "SHRIRAMPUR"
  },
  {    
    "zone": "NORTH",
    "state": "UTTAR PRADESH",
    "city": "AGRA",
    "branchName": "AGRA"
  },
   {   
    "zone": "NORTH",
    "state": "UTTARAKHAND",
    "city": "DEHRADUN",
    "branchName": "YAMUNANAGAR"
  },
  {    
    "zone": "SOUTH",
    "state": "TELANGANA",
    "city": "HYDERABAD",
    "branchName": "WARNGAL"
  },
  {    
    "zone": "NORTH",
    "state": "GUJARAT",
    "city": "AHMEDABAD",
    "branchName": "AHEMDABAD REGIONAL OFFICE"
  },
  {   
    "zone": "SOUTH",
    "state": "KARNATAKA",
    "city": "BELGAUM",
    "branchName": "BELGAUM"
  },  
  {    
    "zone": "SOUTH",
    "state": "MAHARASHTRA",
    "city": "SANGAMNER",
    "branchName": "URBAN"
  },
  {    
    "zone": "SOUTH",
    "state": "MAHARASHTRA",
    "city": "SOLAPUR",
    "branchName": "BARSHI"
  },
  {   
    "zone": "SOUTH",
    "state": "TAMILNADU",
    "city": "MADURAI",
    "branchName": "VIRUDHUNAGAR"
  },
  {    
    "zone": "SOUTH",
    "state": "KARNATAKA",
    "city": "DAVANGERE",
    "branchName": "SHIMOGA"
  },  
  {    
    "zone": "SOUTH",
    "state": "MAHARASHTRA",
    "city": "PUNE",
    "branchName": "THANE"
  },
  {   
    "zone": "SOUTH",
    "state": "TAMILNADU",
    "city": "MADURAI",
    "branchName": "THENI"
  },
  {    
    "zone": "SOUTH",
    "state": "TAMILNADU",
    "city": "COIMBATORE",
    "branchName": "UDUMALPETH"
  },
  
  {   
    "zone": "NORTH",
    "state": "GUJARAT",
    "city": "SURAT",
    "branchName": "VYARA"
  },
  {    
    "zone": "SOUTH",
    "state": "MAHARASHTRA",
    "city": "NAGPUR",
    "branchName": "WARDHA"
  } 
]

In this article, we will look into sorting of the above JSON data using various examples from the AngularJs perspective.

Using the code

Let us first present the unsorted record. To do that, let's first create the sortingController.js controller and add the below code

//creating an application module
var sortingAppModule = angular.module("sortingApp", []);

//The below code will read the data from dataSource and will pass to the $scope.data variable 
sortingAppModule.controller("sortingCtrl", function($scope){    

var dataSource = [
		 {    
		    "zone": "SOUTH",
		    "state": "MAHARASHTRA",
		    "city": "SANGAMNER",
		    "branchName": "SHRIRAMPUR"
		  },
		  {    
		    "zone": "NORTH",
		    "state": "UTTAR PRADESH",
		    "city": "AGRA",
		    "branchName": "AGRA"
		  },
		   {   
		    "zone": "NORTH",
		    "state": "UTTARAKHAND",
		    "city": "DEHRADUN",
		    "branchName": "YAMUNANAGAR"
		  },
		  {    
		    "zone": "SOUTH",
		    "state": "TELANGANA",
		    "city": "HYDERABAD",
		    "branchName": "WARNGAL"
		  },
		  {    
		    "zone": "NORTH",
		    "state": "GUJARAT",
		    "city": "AHMEDABAD",
		    "branchName": "AHEMDABAD REGIONAL OFFICE"
		  },
		  {   
		    "zone": "SOUTH",
		    "state": "KARNATAKA",
		    "city": "BELGAUM",
		    "branchName": "BELGAUM"
		  },  
		  {    
		    "zone": "SOUTH",
		    "state": "MAHARASHTRA",
		    "city": "SANGAMNER",
		    "branchName": "URBAN"
		  },
		  {    
		    "zone": "SOUTH",
		    "state": "MAHARASHTRA",
		    "city": "SOLAPUR",
		    "branchName": "BARSHI"
		  },
		  {   
		    "zone": "SOUTH",
		    "state": "TAMILNADU",
		    "city": "MADURAI",
		    "branchName": "VIRUDHUNAGAR"
		  },
		  {    
		    "zone": "SOUTH",
		    "state": "KARNATAKA",
		    "city": "DAVANGERE",
		    "branchName": "SHIMOGA"
		  },  
		  {    
		    "zone": "SOUTH",
		    "state": "MAHARASHTRA",
		    "city": "PUNE",
		    "branchName": "THANE"
		  },
		  {   
		    "zone": "SOUTH",
		    "state": "TAMILNADU",
		    "city": "MADURAI",
		    "branchName": "THENI"
		  },
		  {    
		    "zone": "SOUTH",
		    "state": "TAMILNADU",
		    "city": "COIMBATORE",
		    "branchName": "UDUMALPETH"
		  },
		  
		  {   
		    "zone": "NORTH",
		    "state": "GUJARAT",
		    "city": "SURAT",
		    "branchName": "VYARA"
		  },
		  {    
		    "zone": "SOUTH",
		    "state": "MAHARASHTRA",
		    "city": "NAGPUR",
		    "branchName": "WARDHA"
		  } 
	];

	$scope.data = dataSource;
			
	});//end controller

At first we are creating the dataSource and then assigning it to $scope.data.

The $scope.data 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="sortingController.js"></script>
</head>

<body ng-app="sortingApp">
		<div align="center"><b><u><font size="8px">Unsorted Record</font></u></b></div>
		<div ng-controller="sortingCtrl" align="center">  
			<table border="1">
				<tr>
					  <th>Branch Name</th>	
					   <th>Zone</th>
					   <th>State</th>
					  <th>City</th>
				</tr>
				<tr ng-repeat="d in data">

					<td><span>{{d.branchName}}</span></td>					
					<td><span>{{d.zone}}</span></td>
					<td><span>{{d.state}}</span></td>					
					<td><span>{{d.city}}</span></td>
				</tr>				
			</table>
		</div>		
	</body>
</html>

The resultant output is

Example 1: Sort using BranchName field in Ascending Order

In this example we will look into how to sort the records based on the BranchName field in Ascending Order

In the index.html, let's add

<tr ng-repeat="d in data | orderBy : 'branchName'">

We have added the orderBy filter which will sort the array records by the branchName field in Ascending Order.

Example 2: Sort using BranchName field in Descending Order

In this example we will look into how to sort the records based on the BranchName field in Descending Order

In the index.html, let's add

<tr ng-repeat="d in data | orderBy : '-branchName'">

We have added the orderBy filter and prepended a minus(-) symbol before the branchName field which will sort the array records by the branchName field in Descending Order.

Example 3: Sort using Zone then by BranchName field in Ascending Order

In this example we will look into how to sort the records first based on the Zone field followed by BranchName fieldin Ascending Order

In the index.html, let's add

<tr ng-repeat="d in data | orderBy : ['zone','branchName']">

While sorting by multiple fields, we need to specify them within the square brackets([]) seperated by commas.

Example 4: Sort using Zone(Descending) then by BranchName field(Ascending) followed by State (Descending) and City(Ascending)

In this example we will look into how to sort the records first based on the Zone field (Descending) followed by BranchNamefield(Ascending) , State (Descending) and lastly by City (Ascending)

In the index.html, let's add

<tr ng-repeat="d in data | orderBy : ['-zone','branchName','-state','city']">

While sorting by multiple fields, we need to specify them within the square brackets([]) seperated by commas and prepending minus(-) symbol before the fields will sort them in Descending Order

Conclusion

This article taught us how to use orderBy filter of AngularJs to perform sorting. Hope this will be helpful. Thanks for reading.Zipped file is attached herewith.