Using AngularJS and REST to Fetch Data from SharePoint List with a Filter on Each Column of Table

Harsh D
8y
7.6k
0
0
25
Blog

AngularJSandSharepoint.zip

In this blog we will see how to fetch all items from SharePoint 2013 List and display in table format with filter for each column.

For this example I have created “EventRegistration” List with the following columns.

Don’t forget to create Location List. We are using it in EventRegistration as Lookup.

create

Initial data from SharePoint List,

Filtering on Name Column,

Filtering on Location Column,

In this way you can filter multiple columns.

The code is self-explanatory.

Line 9 is the REST URL to fetch data from splist,

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var spApp = angular.module('spApp', []);
spApp.controller('spListCtrl', function($scope, $http)
{
$http
({
method: "GET",
url: "https://sharepointsite/_api/web/lists/getByTitle('EventRegistration')/items?$select=Name,EventRegistration,Notification,Author/Title,Location/Title&$expand=Author/Title,Location/Title",
headers:
{
"Accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config)
{
$scope.xData = data.d.results;
console.log(data.d.results);
}).error(function(data, status, headers, config) {});
});
</script>
<div ng-app="spApp">
<div ng-controller="spListCtrl">
<p><input type="text" ng-model="search.Name"></p>
<p><input type="text" ng-model="search.LastDatePUCDone"></p>
<table witdh="100%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th><input type="text" ng-model="search.Name"></th>
<th><input type="text" ng-model="search.EventRegistration"></th>
<th><input type="text" ng-model="search.Notification"></th>
<th><input type="text" ng-model="search.Author.Title"></th>
<th><input type="text" ng-model="search.Location.Title"></th>
</tr>
<th>Name</th>
<th>Event Registered Date</th>
<th>Notification</th>
<th>Author</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in xData | filter : {Name:search.Name,EventRegistration:search.EventRegistration,Notification:search.Notification,Author:search.Author,Location:search.Location}">
<td>{{x.Name}}</td>
<td>{{x.EventRegistration}}</td>
<td>{{x.Notification}}</td>
<td>{{x.Author.Title}}</td>
<td>{{x.Location.Title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</html>