Kwizcom Forms

Get list items using Rest API in SharePoint Online/2013/2016

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

This SharePoint Rest API tutorial, we will discuss how to retrieve and display list items using Rest API in SharePoint Online or SharePoint 2013/2016.

We will see how to display list items in grid format using Rest API in SharePoint.

SharePoint deveopment training course

Get SharePoint list items using Rest API

Now, we will see how to retrieve list items using Rest API in SharePoint Online Office 365. The same code will work fine in both SharePoint 2016 as well as SharePoint 2013.

Here we will use a button and on button click, we will retrieve the list items. We will add the HTML and rest API code inside a script editor web part which we will add inside a web part page.

HTML Code:

<div>
<input type="button" id="btnSubmit" value="Get List Data using Rest API" />
</div>
<div id="divResults"></div>

Rest API Code:

Below is the full rest API code to retrieve SharePoint list item.

Here also we have used _spPageContextInfo.webAbsoluteUrl to get the absolute URL of the site which we have used in the Rest endpoint. You can check out _spPageContextInfo javascript or jquery variable in SharePoint 2013 for more information how we can use _spPageContextInfo.

Then in onQuerySucceeded method, we are retrieving all the lists in for each loop. And we are binding the data into the <div id=”divResults”></div>.

Here we are trying to retrieve SharePoint list items from MyCompanyInfo list which has two columns

  • Title
  • Industry

To retrieve all list item we are building the rest api endpoint URL like below:

var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MyCompanyInfo')/items";

Similarly, if you want to retrieve based filter conditions, you can build URL like below, here it will retrieve items whose id is greater than 3.

var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('MyCompanyInfo')/items?$filter=Id ge 3″;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
$("#btnSubmit").on("click", function () {
getListData();
});
});

function getListData() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MyCompanyInfo')/items";
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded(data) {
var listItemInfo = ";
$.each(data.d.results, function (key, value) {
listItemInfo += '<b>Title:</b> ' + value.Title + ' – <b>Industry:</b> ' + value.Industry + '<br />';
});
$("#divResults").html(listItemInfo);
}
function onQueryFailed() {
alert('Error!');
}

</script>

Once you Save the code and click on the button, it will display all the items from the MyCompanyInfo list.

get sharepoint list items using rest api

Display list data in grid using Rest API in SharePoint

Now we will see how to display list data in a grid using Rest API in SharePoint Online or SharePoint 2013/2016.

Here I have a SharePoint list known as Employee which has 4 columns as:

  • Title
  • FirstName
  • LastName
  • Deptname

We have added a few items to the SharePoint list.

Below is the Rest API code which I have put inside a script editor web part in a SharePoint 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>

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

get sharepoint online list items using rest api

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial, we learned how to display SharePoint list items in grid using Rest API.

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.