SharePoint Pals
 | Sign In
How to Get All Items from SharePoint List and Display it in Custom HTML table with Sorting using AngularJS
by Ahamed Fazil Buhari 10 Oct 2016
SharePoint Developer
Today  :   3     Total  :    803

Hello everyone, in this article we will look into the approach on how to get all the SharePoint List Items and showing that in a Custom page using HTML table. Here we’re using two important things from AngularJS, one is $scope object and another one is $http service. To know more about $scope object and other basic stuffs in AngularJS, please refer my previous article - Basics of AngularJS in SharePoint

About $http service: HTTP is a service that Angular provides, and it is an object with methods we can use to make HTTP calls. The methods are named after the HTTP methods, so the methods on this object are GET, POST, PUT, and DELETE.

 var MainController = function ($scope, $http) {
     $scope.user = $http.get('url/users/547226'); //wrong way, bcz its async so we won’t get the result immediately.

Making use of Promise

As the name implies, the promise object is an object that promises to give us some result in the future, and that output might be the data that we need, or the result might be an error if the server was unreachable or unavailable or some issue. We need to call a then method on my promise and pass the then method a function that will be called in the future.

 var MainController = function ($scope, $http) {
     var promise = $http.get('/users/547226'); 
 		$scope.user =;
 var MainController = function ($scope, $http) {
     var onSuccess = function(response) {
 	$scope.user =;
     var onError = function(reason) {
 	$scope.error = “Something went wrong”;
 	.then(onSuccess, onError); 

.then – This method is called when the function is ready. Let’s explain the $http service with an example. Consider that we have a SharePoint list as shown below,


Here, I’ve created custom page and added this below HTML element in it.

 <div id="appDiv" ng-app="myapp">
     <div id="controllerDiv" ng-controller="MyController">
 	Order By:
         <select ng-model="customOrderBy">
             <option value="Title">Asc - Title</option>
             <option value="-Title">Desc - Title</option>
             <option value="People_x0020_using">Asc - Ppl using</option>
             <option value="-People_x0020_using">Desc - Ppl using</option>
         <br />
         <table id="userDetails" border="1px solid">
                     <th>Phone Title</th>
                     <th>No. of ppl using</th>
                 <tr ng-repeat="ppl in people | orderBy:customOrderBy">
                     <td>{{ppl.People_x0020_using | number}}</td>

In my previous article I’ve explained about some very common directives like ng-app, ng-controller, ng-model in AngularJS. Here we’ve another useful directives ng-repeat and filter.

ng-repeat: ng-repeat="ppl in people" , ng-repeat is a lot like foreach loop in C#.

filters: In addition to directives, Angular also has the concept of filters. A filter is something that we invoke and pipe data through, by using the symbol | and then the name of the filter (number, currency, lowercase, uppercase etc.)

Basic format: expression | filterName:parameter




{{amount | currency:”USD$”}}


{{startDate | date:’short’}}


ppl in people | filter:Title


{{ ppl | json }}


ppl in people | limitTo:10

lowercase, uppercase

{{ || uppercase }}


{{ count | number }}


ppl in people | filter: searchTerm| orderBy: ‘Title’

Added the below script in my JS file,

 (function () { //IIFE 
     //Creating a Module
     var app = angular.module("myapp", []);
     var MyController = function ($scope, $http) {
         var json_listdata = {};
         var onSuccess = function (response) {
             //this result will be in json format, so we are getting the 'value' from the ''
             var json_values =;
      //we assign it simply like shown below
 	     $scope.people = json_values;
             /*or we can iterate through all the items and assign it to our own jsom obj
             $.each(json_values, function (key, val) {
                 var jsonObj_Values = {};
                 jsonObj_Values["Title"] = val.Title;
                 jsonObj_Values["People Using"] = val.People_x0020_using;
                 json_listdata[val.ID] = jsonObj_Values;
             //assigning the value into angular $scope element 
             $scope.people = json_listdata;
         var onError = function (reason) {
             $scope.error = "Could not fetch, something went wrong";
         function getSPListItems() {
             var getURLVal = _spPageContextInfo.webAbsoluteUrl + "/_api" + "/web/lists/getbytitle('Phone')/Items?$select=*";
             //getURLVal, this only tells from which list and what items under what condition it should be fetched
 	          .then(onSuccess, onError);
     //Registering the controller in the module
     app.controller("MyController", MyController);

And the output will be shown as below,


Based upon the Order By: dropdown value, the ordering in the table will differ. I hope, you got some idea about $http service and ng-repeat from this article.

Happy Coding


blog comments powered by Disqus

SharePoint Pals

SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile


Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community

SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to in a word document.

Related Resources

Recent Tweets

Twitter October 23, 22:21
How to Add/Remove User Custom Actions (in Site Actions Menu) Programmatically using CSOM PNP in SharePoint -

Twitter October 21, 21:34
How to Add a JS Link Reference to the Display Form or Any other ASPX Programmatically using CSOM PNP in SharePoint -

Twitter October 20, 13:01
How to Add a JS Link Reference to the NewForm and EditForm Programmatically using CSOM PNP in SharePoint Office 365-

Twitter October 12, 12:15
How to Deploy Provider Hosted Apps (Add-Ins) by App Stapling in SharePoint Office 365 -

Twitter October 11, 13:39
How to Deploy Provider HostedApp programmatically using CSOM in SharePoint Office 365 Activating Developer Feature -

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation