Office 365 SharePoint Online Display List Data in Tabular format using AngularJS
This article has been originally published by Bhawana Rathore in EnjoySharePoint.com. You can see the original article in the below URL but still felt this is very much worth sharing in Wiki.
Display List Data in Tabular format in SharePoint Online using AngularJS
See also wrote another article on Rest API with Postman, you can check details below:
Here we will discuss how we can display list data in tabular format in SharePoint online using AngularJS. Here we have a list name as Product which few columns like ProductName, ProductImage, ProductRate etc.
Now we have added the below code inside a script editor web part inside a web part page to display the product list. Before that, we 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 we save the product list will appear like below:
