SharePoint 2013: Filter and sort List data using AngularJS and REST API

This Angularjs tutorial, we will discuss how to filter and sort in SharePoint List data using AngularJS / REST API in SharePoint 2013/2016/Online. I used the REST API to talk to SharePoint and get the data from the list. I am not going to discuss much the REST services since many folks have already done great work on explaining REST API services.

Here we just see that we have first created an Angular Controller with the name “spCustomerController”. We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of the SharePoint list.

$scope is a glue between a Controller and a View. It acts as an execution context for Expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}. We’ll be looking at a way to sort and filter our tabular data.

This is a common feature that is always useful so let’s look at what we’ll be building and dive right into the code.

SharePoint 2013 Filter and sort of List data using AngularJS and REST API

We will implement on a Sample Application and try to get the data from SharePoint list bind the table and applying sort and filter our tabular data.

Our application will allow us to:

  • Show a table of data (ng-repeat)
  • Sort by ascending or descending columns (orderBy)
  • Filter by using a search field (filter)

These are three common functions in any application and Angular lets us implement these features in a very simple way. Let’s set up our sample application’s HTML and Angular parts and then look at how we can sort and filter.

angularjs sort filter sharepoint list data
angularjs sort filter sharepoint list data

Use the following procedure to create a sample:

<h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">
<div>

Sort by:

<select ng-model="sortExpression">
<option value="Title">Title</option>
<option value="Employee">Employee</option>
<option value="Company">Company</option>
</select>
</div>
<br />

Search By Any:

<input type="text" ng-model="search.$" />
<br />
<br />
<table class="table table-condensed table-hover">
<tr>
<th>Title</th>
<th>Employee</th>
<th>Company</th>
</tr>
<tr ng-repeat="customer in customers | orderBy:mySortFunction | filter:search">
<td>{{customer.Title}}</td>
<td>{{customer.Employee}}</td>
<td>{{customer.Company}}</td>
</tr>
</table>
</div>
</div>

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

<style>
th {
background-color: #778899;
color: white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
var myAngApp = angular.module(‘SharePointAngApp’, []);
myAngApp.controller(‘spCustomerController’, function ($scope, $http) {

$http({
method: ‘GET’,
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle(‘InfoList’)/items?$select=Title,Employee,Company",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {

$scope.customers = data.d.results;
$scope.mySortFunction = function(customer) {//Sorting Iteam
if(isNaN(customer[$scope.sortExpression]))
return customer[$scope.sortExpression];
return parseInt(customer[$scope.sortExpression]);
}
}).error(function (data, status, headers, config) {
});
});
</script>

<h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
<br /><br />
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">
<div>

Sort by:
<select ng-model="sortExpression">
<option value="Title">Title</option>
<option value="Employee">Employee</option>
<option value="Company">Company</option>
</select>
</div>
<br />

Search By Any:

<input type="text" ng-model="search.$" />
<br />
<br />
<table class="table table-condensed table-hover">
<tr>
<th>Title</th>
<th>Employee</th>
<th>Company</th>
</tr>
<tr ng-repeat="customer in customers | orderBy:mySortFunction | filter:search">
<td>{{customer.Title}}</td>
<td>{{customer.Employee}}</td>
<td>{{customer.Company}}</td>
</tr>
</table>
</div>
</div>
angularjs sort filter sharepoint 2013 list data
angularjs sort filter sharepoint 2013 list data

Filtering the Table:

<tr ng-repeat="customer in customers | filter:search">

You will need to bind whatever input you are using with ng-model=”search.$”. Now as we type into that input box, you should see that table changes.

angularjs sort filter sharepoint 2016 list data
angularjs sort filter sharepoint 2016 list data

Sorting the Table:

<tr ng-repeat="customer in customers | orderBy:mySortFunction">
angularjs sort filter sharepoint online list data
angularjs sort filter sharepoint online list data

That’s all we need to change the sort order of our ng-repeat. If you refresh your page, you’ll see that your list is sorted by Employee in normal order.

You may like following angularjs and rest api tutorials:

Hope this SharePoint tutorial helps to filter and sort list data using AngularJS and Rest API in SharePoint Online or SharePoint 2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

  • php training says:

    nice post thanks for sharing this post

  • >