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.
Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com
above code is not working bijay
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.
Is not working for me too
Can you let us know if you are getting any error? You can check in the developer tools (Chrome or IE)
This code is not working
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.
What kind of query is this ?
It works , but along with this how will i include attachment column url ?
*Adding…
Using Rest Api i did , the same i want for Attachment Column too
is there a way to extract the newsfeed comments?