Display SharePoint list items using rest api

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 can easily, display sharepoint list items using rest api.

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

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 display sharepoint list items using rest api. 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 sharepoint list items using rest api

Display sharepoint list items using rest api in an HTML table

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:

display sharepoint list items using rest api

This is how we can display sharepoint list items using rest api in an HTML table in SharePoint Online as well as SharePoint 2013/2016/2019.

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial, we learned how to display SharePoint list items in grid using Rest API. In SharePoint Online/2013/2016, we can display sharepoint list items using rest api.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

  • I created a sharepoint list with four columns. I named them as follows: Name, Position, Office, Salary. Could you please help me how to retrieve items from my list? SharePoint website needs a username and password to login… this is the problem I am straggling with.

  • >