Post
Ask Question

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

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,

Sharepoint List
Filtering on Name Column,

Filtering
Filtering on Location Column,

Filtering
In this way you can filter multiple columns.

The code is self-explanatory.

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <script>  
  5.     var spApp = angular.module('spApp', []);  
  6.     spApp.controller('spListCtrl', function($scope, $http)   
  7.      {  
  8.         $http  
  9.         ({  
  10.             method: "GET",  
  11.             url: "https://sharepointsite/_api/web/lists/getByTitle('EventRegistration')/items?$select=Name,EventRegistration,Notification,Author/Title,Location/Title&$expand=Author/Title,Location/Title",  
  12.             headers:   
  13.             {  
  14.                 "Accept": "application/json;odata=verbose"  
  15.             }  
  16.         }).success(function(data, status, headers, config)   
  17.         {  
  18.             $scope.xData = data.d.results;  
  19.             console.log(data.d.results);  
  20.         }).error(function(data, status, headers, config) {});  
  21.     });  
  22. </script>  
  23. <div ng-app="spApp">  
  24.     <div ng-controller="spListCtrl">  
  25.         <p><input type="text" ng-model="search.Name"></p>  
  26.         <p><input type="text" ng-model="search.LastDatePUCDone"></p>  
  27.         <table witdh="100%" cellpadding="5" cellspacing="5">  
  28.             <thead>  
  29.                 <tr>  
  30.                     <th><input type="text" ng-model="search.Name"></th>  
  31.                     <th><input type="text" ng-model="search.EventRegistration"></th>  
  32.                     <th><input type="text" ng-model="search.Notification"></th>  
  33.                     <th><input type="text" ng-model="search.Author.Title"></th>  
  34.                     <th><input type="text" ng-model="search.Location.Title"></th>  
  35.                 </tr>  
  36.                 <th>Name</th>  
  37.                 <th>Event Registered Date</th>  
  38.                 <th>Notification</th>  
  39.                 <th>Author</th>  
  40.                 <th>Location</th>  
  41.                 </tr>  
  42.             </thead>  
  43.             <tbody>  
  44.                 <tr ng-repeat="x in xData | filter : {Name:search.Name,EventRegistration:search.EventRegistration,Notification:search.Notification,Author:search.Author,Location:search.Location}">  
  45.                     <td>{{x.Name}}</td>  
  46.                     <td>{{x.EventRegistration}}</td>  
  47.                     <td>{{x.Notification}}</td>  
  48.                     <td>{{x.Author.Title}}</td>  
  49.                     <td>{{x.Location.Title}}</td>  
  50.                 </tr>  
  51.             </tbody>  
  52.         </table>  
  53.     </div>  
  54. </div>  
  55.   
  56. </html>