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:
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.
SharePoint Online FREE Training
JOIN a FREE SharePoint Video Course (3 Part Video Series)
