Display SharePoint List Data in Tabular format using AngularJS in SharePoint Online

This SharePoint online tutorial explains how we can display list data in tabular format in SharePoint online (Download PDF for FREE) using AngularJS. Here I have a list name as Product which few columns like ProductName, ProductImage, ProductRate etc.

Now I have added the below code inside a script editor web part inside a web part page to display the product list. Before that, I have also added the required js files inside the Style Library.

<script src=”https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Style Library/angular.min.js”></script>
<script src=”https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Style Library/jquery-2.0.3.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js”></script>

<div ng-app=”myapp”><b>Product Details</b>
<div ng-controller=”MyController” class=”ng-scope”>
<div ng-repeat=”p in Products”>
<table style=”background-color:#f07432″>
<tr><td align = “center”><b>Product Name: {{p.ProductName}}</b> </td></tr>
<tr><td align = “center”><img ng-src={{p.ProductImage}} /> </td></tr>
<tr><td align = “center”><b> Rate: USD. {{p.ProductRate}}</b></td></tr>
</table>
<hr />
</div>
</div>
</div>
<script type=”text/javascript”>
var appVar = angular.module(‘myapp’, []);
appVar.controller(“MyController”, function($scope){
GetListItems($scope);
});

function GetListItems($scope)
{ $scope.loadREST = function () {
jQuery.ajax({
url: “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/_api/web/lists/GetByTitle(‘product’)/items”,
type: “GET”,
dataType: “json”,
async: “true”,
headers: { “Accept”: “application/json;odata=verbose” },
success: function (data) {
var newData = [];
jQuery.each(data.d.results, function(index,value) {

newData.push({ProductName: value.ProductName, ProductRate: value.ProductRate, ProductImage: value.ProductImage.Url});
});
$scope.$apply(function(){
$scope.Products = newData;
});
},
error: function () {
alert(“error”);
}

});

};
$scope.loadREST();
}
</script>

Once you will Save the product list will appear like below:

 Display List Data in Tabular format in SharePoint Online using AngularJS

Display List Data in Tabular format in SharePoint Online using AngularJS

You may like following angularjs & SharePoint 2013 tutorials:

Hope this will be helpful to retrieve and display SharePoint list data in tabular format using angularjs in SharePoint Online/2013/2016/

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

>