Display SharePoint list item using AngularJS REST API SharePoint online

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
Display SharePoint list item using AngularJS REST API SharePoint online

You may like following angularjs & SharePoint 2013 tutorials:



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

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →