Display list data in grid using Rest API in SharePoint Online SharePoint 2016 and SharePoint 2013

Display list data in grid using Rest API in SharePoint Online SharePoint 2016 and SharePoint 2013

Here we will display how we can display list data in a grid using Rest API in SharePoint online (Download PDF for FREE) or SharePoint 2013. Here I have a list known as Employee which has 4 columns as:
Title
FirstName
LastName
Deptname

In that list we have added few records into the list.

SharePoint deveopment training course

Below is the Rest API code which I have put inside a script editor web part in a web part page.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<script>
$(function(){
$(“#btnClick”).click(function(){
var requestUri = _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getbytitle(‘Employees’)/items”;
$.ajax({
url: requestUri,
type: “GET”,
headers: {
“accept”:”application/json; odata=verbose”
},
success: onSuccess,
error: onError
});

function onSuccess(data) {
var objItems = data.d.results;
var tableContent = ‘<table id=”tableEmployee” style=”width:100%” border=”1 px”><thead><tr><td>Title</td>’ + ‘<td>FirstName</td>’ + ‘<td>LastName</td>’ + ‘<td>Department Name</td>’ + ‘</tr></thead><tbody>’;

for (var i = 0; i < objItems.length; i++) {
tableContent += ‘<tr>’;
tableContent += ‘<td>’ + objItems[i].Title+ ‘</td>’;
tableContent += ‘<td>’ + objItems[i].FirstName + ‘</td>’;
tableContent += ‘<td>’ + objItems[i].LastName + ‘</td>’;
tableContent += ‘<td>’ + objItems[i].deptname + ‘</td>’;
tableContent += ‘</tr>’;
}
$(‘#employeeGrid’).append(tableContent);
}

function onError(error) {
alert(‘Error’);
}
});
});
</script>

<input type=”button” id=”btnClick” value=”Get Employee Records”/>
<div id=”CustomerPanel”>
<table id=’tableEmployee’ style=”width: 100%;” border=”1 px”>
<tr>
<td>
<div id=”employeeGrid” style=”width: 100%”></div>
</td>
</tr>
</table>
</div>

Read some sharepoint online tutorials:


Once you click on the button it will display the records like below:

Display list data in grid using Rest API in SharePoint Online SharePoint 2016 and SharePoint 2013
Display list data in grid using Rest API in SharePoint Online SharePoint 2016 and SharePoint 2013

Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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 →
    • Hey Suresh,
      This seems to be a tested code with a screenshot. Could you let me know what error exactly you are getting? Probably I can tell you what might be the issue.