Monday, March 21, 2016

Angular JS Code to read SharePoint list

Hi folks,

I did a learning POC to fetch items from a SharePoint list using REST API and then display them in HTML table using Angular JS. Here is the code below.

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

<script>

console.log(GetSiteUrl());


var spApp=angular.module('spApp',[]);
spApp.controller('spListCtrl',function($scope, $http){
$http(
{
method: "GET",
url: GetSiteUrl()+"/_api/web/lists/getByTitle('SAP Batch Jobs')/items?$select=Job%5Fx0020%5FName,Title,Client%5Fx0020%5FNumber,Location",
headers: { "Accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config){
$scope.SAP = data.d.results;
}).error(function (data, status, headers, config){
});
});

function GetSiteUrl(){
var urlParts = document.location.href.split("/");
return urlParts[0] + "//" + urlParts[2] + "/" + urlParts[3] + "/" + urlParts[4];
}
</script>

<div ng-app="spApp">
<div ng-controller="spListCtrl">
<table width="100%" cellpadding="10" cellspacing="2">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Client Number</th>
<th>Location</th>
</thead>
<tbody>
<tr ng-repeat="s in SAP">
<td>{{s.Job_x0020_Name}}</td>
<td>{{s.Title}}</td>
<td>{{s.Client_x0020_Number}}</td>
<td>{{s.Location}}</td>
</tr>
</tbody>
</table>
</div>
</div>


Preferred links:
https://saikiran78.wordpress.com/2014/01/16/first-move-towards-angularjs-with-sharepoint-2013/
http://www.dotnetcurry.com/sharepoint/1009/sharepoint-webpart-angularjs-knockoutjs

No comments:

Post a Comment