Do you want to get list items using the SharePoint REST API?
I will tell you how to get it.
In this tutorial, I will explain step by step how to retrieve list items in SharePoint Online using the REST API, with a few real-world examples.
Get List Items using SharePoint REST API
In this first example, I will show you how to retrieve all SharePoint list items using the REST API.
For this demo, I created a SharePoint list with a few columns and then inserted a few items into it. So the SharePoint list looks like the screenshot below.
Here, I wanted to display the SharePoint list items in tabular format. Below is the complete code you can use in a SharePoint script editor web part.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Function to fetch list items
function getListItems() {
var endpointUrl = "https://szg52.sharepoint.com/sites/Sales/_api/web/lists/getbytitle('Project')/items";
$.ajax({
url: endpointUrl,
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
displayListItems(data.d.results);
},
error: function(error) {
console.error("Failed to fetch list items:", error);
}
});
}
// Function to display list items in the table
function displayListItems(items) {
var $tableBody = $("#listItemsTable tbody");
$tableBody.empty();
items.forEach(function(item) {
var $row = $("<tr>");
$row.append("<td>" + item.Id + "</td>");
$row.append("<td>" + item.Title + "</td>");
$row.append("<td>" + item.Status + "</td>");
// Add more columns if needed
$tableBody.append($row);
});
}
// Load list items on page load
getListItems();
});
</script>
<style>
/* Add border and vertical lines */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for header */
}
/* Add vertical lines between columns */
th:not(:last-child), td:not(:last-child) {
border-right: 1px solid black;
}
</style>
<div>List Items</div>
<table id="listItemsTable">
<thead>
<tr>
<th>ID</th>
<th>Project Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Once you run the code below, you can see all the items from the SharePoint list that we have retrieved using the SharePoint REST API.
Check out How to Get Current User using SharePoint Rest API?
Get SharePoint List Item By ID using REST API
In this example, I will explain how to retrieve a list item by ID using the SharePoint REST API.
For example, we will retrieve the list item by ID from the project list and display it on the SharePoint page. Below is how my SharePoint project list looks like:
Here is the complete code to get items by ID using the SharePoint REST API. You can add the code in a script editor web part in a SharePoint page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function getListItemById(itemId) {
var endpointUrl = "https://szg52.sharepoint.com/sites/Sales/_api/web/lists/getbytitle('Project')/items(" + itemId + ")";
$.ajax({
url: endpointUrl,
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
displayListItem(data.d);
},
error: function(error) {
console.error("Failed to fetch list item:", error);
}
});
}
// Function to display a single list item
function displayListItem(item) {
// Clear any existing data in the table body
var $tableBody = $("#listItemsTable tbody");
$tableBody.empty();
// Create a row for the item and append it to the table
var $row = $("<tr>");
$row.append("<td>" + item.Id + "</td>");
$row.append("<td>" + item.Title + "</td>");
$row.append("<td>" + item.Status + "</td>");
// Add more columns if needed
$tableBody.append($row);
}
$("#getItemByIdBtn").click(function(event) {
event.preventDefault(); // Prevent the default form submission
var itemId = $("#itemIdInput").val();
getListItemById(itemId);
});
});
</script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for header */
}
/* Add vertical lines between columns */
th:not(:last-child), td:not(:last-child) {
border-right: 1px solid black;
}
</style>
<div>Get List Item by ID</div>
<form id="getItemForm">
<label for="itemIdInput">Enter Item ID:</label>
<input type="number" id="itemIdInput" name="itemIdInput">
<button type="submit" id="getItemByIdBtn">Get Item</button>
</form>
<div>List Item</div>
<table id="listItemsTable">
<thead>
<tr>
<th>ID</th>
<th>Project Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Once you run the code, provide the item ID you want to retrieve, and click on OK, you can see the SharePoint list items get displayed based on the given ID. Here is the screenshot for your reference.
This is an example of the SharePoint rest api get list item by ID.
Read SharePoint REST API Create Folder
SharePoint REST API Gets List Items By Title
Sometimes, you may retrieve SharePoint list items by their title. In this example, I will explain how to get the item by title using the SharePoint REST API.
For example, we will use the same Project list. From this list, we will retrieve the item based on the Title value using the SharePoint REST API GET method.
To implement this using the SharePoint rest api, you can refer to the code below.
Here, using getProjectByName(), we get the project details based on the user’s project name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for header */
}
/* Add vertical lines between columns */
th:not(:last-child), td:not(:last-child) {
border-right: 1px solid black;
}
</style>
<div>Get Project Details by Name</div>
<form id="getProjectForm">
<label for="projectNameInput">Enter Project Name:</label>
<input type="text" id="projectNameInput" name="projectNameInput">
<button type="button" id="getProjectByNameBtn">Get Project</button>
</form>
<div>Project Details</div>
<table id="projectDetailsTable">
<thead>
<tr>
<th>ID</th>
<th>Project Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
console.log("Document ready");
$("#getProjectByNameBtn").click(function() {
console.log("Button clicked");
var projectName = $("#projectNameInput").val().trim();
if (projectName !== "") {
getProjectByName(projectName);
} else {
$("#projectDetailsTable tbody").html("<tr><td colspan='3'>Please enter project name.</td></tr>");
}
});
// Function to fetch project by Name
function getProjectByName(projectName) {
console.log("Fetching project by name:", projectName);
var siteUrl = "https://szg52.sharepoint.com/sites/Sales";
var listName = "Project";
var endpointUrl = siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Title eq '" + projectName + "'";
$.ajax({
url: endpointUrl,
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
var project = data.d.results[0];
if(project) {
var projectId = project.Id;
var projectStatus = project.Status;
var newRow = "<tr><td>" + projectId + "</td><td>" + projectName + "</td><td>" + projectStatus + "</td></tr>";
$("#projectDetailsTable tbody").html(newRow);
} else {
$("#projectDetailsTable tbody").html("<tr><td colspan='3'>No project found with the given name.</td></tr>");
}
},
error: function(error) {
console.log(JSON.stringify(error));
$("#projectDetailsTable tbody").html("<tr><td colspan='3'>Error occurred while fetching project.</td></tr>");
}
});
}
});
</script>Once you run the code, you can retrieve the item information based on the title (Project name) using the SharePoint REST API. You can see the exact output in the screenshot below:
This is an example of the SharePoint REST API: getting a list item by title.
Check out SharePoint REST API Order by, Filter, Pagination, and Select
Get SharePoint List Items By Field Value using REST API
This is another real-life example that you might get while working as a SharePoint developer. I will show here how to get SharePoint list items by field value using the REST API.
In this example, we will use the same SharePoint Project List. From this list, based on the Status field value, we will retrieve list items using the SharePoint REST API. That means if the status is ‘New’, then it will retrieve all list items with the same status.
To retrieve list items based on the field value, we have used the following REST API code.
- getItemsByStatus(): This function is used to retrieve items based on the given Status using the SharePoint REST API GET method.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* Add border and vertical lines */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for header */
}
/* Add vertical lines between columns */
th:not(:last-child), td:not(:last-child) {
border-right: 1px solid black;
}
</style>
<div>SharePoint List Item Fields by Status</div>
<form id="getItemFieldsByStatusForm">
<label for="statusDropdown">Select Status:</label>
<select id="statusDropdown">
<option value="Working On">Working On</option>
<option value="Completed">Completed</option>
<option value="New">New</option>
</select>
<button type="button" id="getItemsByStatusBtn">OK</button>
</form>
<div>Items by Status</div>
<table id="itemsByStatusTable">
<thead>
<tr>
<th>ID</th>
<th>Project Name</th>
<th>Status</th>
<th>Project Manager</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated dynamically -->
</tbody>
</table>
<script>
$(document).ready(function() {
console.log("Document ready");
$("#getItemsByStatusBtn").click(function() {
console.log("Button clicked");
var selectedStatus = $("#statusDropdown").val();
if (selectedStatus !== "") {
getItemsByStatus(selectedStatus);
} else {
$("#itemsByStatusTable tbody").html("<tr><td colspan='4'>Please select a status.</td></tr>");
}
});
// Function to retrieve items by status from SharePoint list
function getItemsByStatus(status) {
console.log("Fetching items with status:", status); // Log the selected status
var siteUrl = "https://szg52.sharepoint.com/sites/Sales";
var listName = "Project"; // Replace 'Project' with the actual name of your SharePoint list
var endpointUrl = siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Status eq '" + status + "'&$select=ID,Title,Status,ProjectManager/Title&$expand=ProjectManager";
$.ajax({
url: endpointUrl,
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function(data) {
var items = data.d.results;
if(items.length > 0) {
$("#itemsByStatusTable tbody").empty();
$.each(items, function(index, item) {
var itemId = item.ID;
var projectName = item.Title;
var projectStatus = item.Status;
var projectManager = item.ProjectManager ? item.ProjectManager.Title : "N/A"; // Check if Project Manager exists
var newRow = "<tr><td>" + itemId + "</td><td>" + projectName + "</td><td>" + projectStatus + "</td><td>" + projectManager + "</td></tr>";
$("#itemsByStatusTable tbody").append(newRow);
});
} else {
$("#itemsByStatusTable tbody").html("<tr><td colspan='4'>No items found with the selected status.</td></tr>");
}
},
error: function(error) {
console.log(JSON.stringify(error));
$("#itemsByStatusTable tbody").html("<tr><td colspan='4'>Error occurred while fetching items.</td></tr>");
}
});
}
});
</script>Once you run the code, select the Status and click on the OK button. You can view the list of items based on the Status value using the SharePoint REST API. See the screenshot below for your reference.
This is how to retrieve SharePoint list items based on a column value using the REST API.
I hope you now understand how to retrieve SharePoint list items using the REST API. I have shown the following examples here:
- Get List Items using SharePoint REST API
- Get SharePoint List Item By ID using REST API
- SharePoint REST API Gets List Items By Title
- Get SharePoint List Items By Field Value using REST API
Still have any questions? Feel free to leave a comment below. I would love to help you.
You may also like:
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
