Display SharePoint list item using AngularJS REST API SharePoint online

In this post, we will discuss how we can display list items using AngularJS with Rest API in SharePoint Online or SharePoint On-premise. Before reading this you can read my previous post on Angularjs SharePoint 2013/2016/Online tutorial.

Here I have an announcement list where I have a few items in my SharePoint Online site. The below code will work in both On-premise as well as Online versions of SharePoint.

Below code you can put inside a script editor web part in web part page in SharePoint Online/2013/2016.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.min.js”></script>

<div ng-app=”listApp”>
<div id=”App1″ ng-controller=”controller1″>
<h1>Team Announcements</h1>
<ul>
<div ng-repeat=”item in items”>
<p><li>{{item.Title}}</li></p>
</div>
</ul>
</div>

<script>

var appVar = angular.module(‘listApp’, []);
appVar.controller(“controller1”, function($scope){
GetListItems($scope, “Training%20Announcements”);
});

function GetListItems($scope, listName){
$.ajax({
url: “/_api/web/lists/GetByTitle(‘”+listName+”‘)/items”,
method: “GET”,
async: false,
headers: { “Accept”: “application/json;odata=verbose” },
success: function(data){
$scope.items = data.d.results;
},
error: function(sender,args){
console.log(args.get_message());
}
});
}

</script>

After you save the page the items from announcement lists will be appear like below:

Display SharePoint list item using AngularJS REST API SharePoint online

You may like following angularjs & SharePoint 2013 tutorials:

• Angularjs SharePoint 2013/2016/Online tutorial
• SharePoint 2013 Filtering and sorting of List data using AngularJS and REST API
• Retrieve list data using AngularJS REST API in SharePoint 2013
• AngularJS $scope Hierarchy
• AngularJS Tutorial
• Display SharePoint List Data in a Tabular format using AngularJS in SharePoint Online
• Error Handling in AngularJS using JSNLog
• How to Share Data between two Controllers in AngularJS?
• SharePoint Online Branding: Display List items into a page using AngularJS and REST API in SharePoint online or SharePoint 2016/2013

Hope this will be helpful to retrieve SharePoint Online list item using AngularJs Rest API in SharePoint Online/2013/2016.

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Download