Display SharePoint List Data Using REST and AngularJS: Part 1

Prasham Sabadra
Apr 12, 2015

61.4k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Hi All.

So let's start with the requirements.

Requirement: Get all the list items and display them in a specific format. (Actually here we have multiple options to satisfy this requirement including a List Viewer web part or writing a simple script in JavaScript and showing the result in either a Content Editor web part or a Script Viewer web part. Since we need to explore AngularJS and MVC patterns using it we will go with the AngularJS option.)

We can use any type list, here I am using an OOB link list as in the following:

Figure 1: OOB Link List

Since this is my first article, I'll use only one JavaScript file for now and show the results in a Content Editor web part. In the next article I'll divide code into multiple files as in the MVC architecture.

For using AngularJS we need to include a reference to the AngularJS. Either we can use it directly from CDN or download and copy it into the _layouts folder or upload into the master pages gallery like display templates. For now, I have downloaded it and copied to the _layouts/15/AngularJSDemo folder.

The following is the snippet for displaying the data (in other words, View):

<div ng-app="list-module">
<div ng-controller="list-controller">
<ul style="list-style-type:none;">
　　　　<li ng-repeat="item in listitems" style="align:left;>
{{item.URL.Description}}{{item.URL.Url}}
</li>
</ul>
</div>
</div>

Here we are using the AngularJS directives, ng-app, ng-controller and ng-repeat. Here we will not go into those directives in depth. There are already some good articles on those. I have listed a few of those in the references section below.

The key point here is we are getting the list items in listitems and we are looping using ng-repeat and displaying those. Since we are using a link list, we are displaying the link URL and link description.

The next is a script for getting the list items using Rest APIs.

<script src="_layouts/15/AngularJSDemo/angular.min.js"></script> //AngularJS reference
<script type="text/javascript">
var spApp= angular.module('list-module', []);
spApp.controller('list-controller', function($scope, $http){
$http({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Linkit')/items", //assuming web part is added on same site :)
method: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) //got the result successfully
{
var dataResults = data.d.results; // List Items
$scope.listitems = dataResults;
})
.error(function (data, status, headers, config) // got the error
{
alert("error"); //ToDo:Display proper error message/Stack Trace/ Status Code
});
});