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

Display List Data in Tabular format in SharePoint Online using AngularJS

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/

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 8+ years of SharePoint experience as well as in .Net technologies . I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools . Now exploring more in SharePoint 2016 :) Hope here I can contribute and share my knowledge to the fullest. As I believe "There is no wealth like knowledge, and no poverty like ignorance"

View all posts by Bhawana Rathore →