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.

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:

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:

• Create, Update and Delete SharePoint List Item using Rest API
• Create and delete a file using Rest API in SharePoint Online/2013/2016
• Access Rest API using Postman in SharePoint Online/2013/2016
• Send email using rest api using SharePoint online/2013/2016
• Display SharePoint list item using AngularJS REST API SharePoint online
• SharePoint 2013 Using REST API Selecting filtering sorting and pagination in a SharePoint list
• CRUD operations in SharePoint 2013 list item using rest api
• Get All Attachments From SharePoint 2013 List Item using Rest API
• The HTTP header Content-Type is missing or its value is invalid error in REST API in SharePoint 2013/2016/Online

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.