Display SharePoint list item using AngularJS REST API SharePoint online

Display SharePoint list item using AngularJS REST API SharePoint online
InfoPath alternatives for form designing SharePoint

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 Tutorial for SharePoint 2016 Part 1

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

Also read: SharePoint 2013 Filtering and sorting of List data using Angular JS and REST API

Below code you can put inside a script editor web part in web part page.

<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

Hope this will be helpful.

Similar SharePoint 2013 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 →

Leave a Reply