Insert and Retrieve items to SharePoint Online list using Rest API

This SharePoint tutorial we will discuss, how to insert items to sharepoint online list using rest api and how to retrieve items to sharepoint online list using rest api.

REST API is an application program interface that uses HTTP requests to GET, POST, PUT and DELETE data in SharePoint Online.

Insert items to sharepoint online list using rest api

Now we will discuss, I am going to explain how to insert items into the SharePoint list using REST API.

In Rest API, we have different types of commands for data Insert, Retrieve, Update, Delete. Insert/Update-POST, Retrieve-GET and Delete-DELETE commands. Now for inserting items to list, using “type : POST ” command.

I created a custom SharePoint list, named it as a “MyCompanyEmployeeList”.

In this list , I added new columns like:

  • EmpName (Replace “Title”)
  • Gender(choice (radiobutton)
  • contactNumber
  • Department(choice(dropdown))
  • Address.
add item to sharepoint list rest api

Next, I created an HTML form based on our list column names and named it “InsertItemstoList.html”.

InsertItemstoList.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/DevSite/SiteAssets/InsertItemsToList.js"></script>
<style>
thead {color:green;}
tbody {color:blue;}
</style>

</head>
<body>
<table border="1"><thead><tr>
<th style="text-align:center" colspan="2">Employee Form</th></tr>
<tr>
</thead>
<tbody>
<td>
<label for="EmpName">EmployeeName</Label>
</td>
<td>
<input type="text" name="EmployeeName" id="txtEmployeeName"></input>
</td>
</tr>
<tr>
<td>
<label for="Gender">Gender</Label>
</td>
<td>
<input type="radio" name="gender" id="radbtnMale" value="Male">Male</input>
<input type="radio" name="gender" id="radbtnFeMale" value="Female">Female</input>
</td>
</tr>
<tr>
<td>
<label for="ContactNumber">ContactNumber</Label>
</td>
<td>
<input type="text" name="ContactNumber" id="txtContactNumber"></input>
</td>
</tr>
<tr>
<td>
<label for="Department">Department</Label>
</td>
<td>
<Select id="selectOption">
<option value="IT">IT</option>
<option value="Finance">Finance</option>
</Select>
</td>
</tr>
<tr>
<td>
<label for="Address">Address</Label>
</td>
<td>
<textarea col="30" rows="4" id="txtAddress"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button  name="Insert" id="btnInsert" value="Insert">Insert</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

InsertItemsToList.js:

Below is the Rest API code to insert items to SharePoint Onnline list.

$(function () {$("#btnInsert").click(function () {InsertListItem();});});
function InsertListItem()
{
var empname  = $("#txtEmployeeName").val();
var gender = $("input[name='gender']:checked").val();
var number = $("#txtContactNumber").val();
var department=$("#selectOption option:selected").val();
var address = $("#txtAddress").val();
$.ajax
({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('MyCompanyEmployeeList')/items",
type: "POST",
data: JSON.stringify
({
__metadata:
{
type: "SP.Data.MyCompanyEmployeeListListItem"
},
Title : empname,
Gender: gender,
ContactNumber: number,
Department: department,
Address: address
}),
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "POST"
},
success: function(data, status, xhr)
{
alert("item added sucessfully");
},
error: function(xhr, status, error)
{
alert(JSON.stringify(error));
}
});
}

Now upload these two html and js files in “Site Assets”. Next create a web part page and open this web part page.

For adding content editor web part in that page go to page tab, there click on edit page now the page is in edit mode, here click on add a web part, it will show some categories list.in that go to media content->select content editor web part, next click on add button.then webpart is add on a web part page.

Next click on the Edit Web Part property of the content editor web part, it will show property dialogue box.

In Content Link add your HTML file URL like “/sites/DevSite/SiteAssets/InsertItemsToList.html” and next click on Apply. Now your HTML form is added to your web part page.

retrieve items to sharepoint online list using rest api

Now enter values in the form and click on Insert button then item will be added in our list.

insert items to sharepoint online list using rest api

Now item is added into the list as shown below.

how to add item to sharepoint list using rest api

Retrieve Items from SharePoint list using Rest API

Now I am going to explain how to retrieve items from SharePoint Online list using Rest API.

I have created a list, named it as a “MyCompanyEmployeeList” and add items to list as shown below.

RetriveListUsingRestAPI.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<input type="button" id="btnClick" value="Get all List Items"/>
<div id="ResultDiv"></div>
<script>
$(function(){
$("#btnClick").click(function(){
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MyCompanyEmployeeList')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},success: onSuccess,error: onError});function onSuccess(data) {$("#ResultDiv").empty();
var items = data.d.results;
for (var i = 0; i < items.length; i++) {
$("#ResultDiv").append(items[i].Id+ " : " + items[i].Title + '<br />');
}
}
function onError(error) {alert(JSON.stringify(error));
}
});
});
</script>

Create and open a SharePoint web part page. For adding the Script editor web part, in that page go to page tab, there click on edit page now the page is in edit mode, here click on add a web part, it will show some categories list. On that go to media content -> select Script Editor web part, next click on add button, then web part is added on the web part page.

Copy and Past the above code in Script Editor web part and next click on Stop Editing .now click on Button called “Get all List Items” it display id and title from the SharePoint list.

Now, you can see the result like below:

retrieve items to sharepoint online list using rest api

You may like following SharePoint Rest API tutorials:

Here, we learned how to insert items to the SharePoint Online list using Rest API and also, we saw how we can retrieve SharePoint Online list items using Rest API.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SPGuides.com

>