Create, Update and Delete SharePoint List Item using Rest API

This SharePoint Rest API tutorial explains, how to create, update and delete SharePoint list item using Rest API in SharePoint Online or SharePoint 2013/2016/2019.

If you are new to Rest API SharePoint, then you can also check SharePoint Rest API Crud Operations.

Below script code, you can add to a script editor web part or to a content editor web part and it will work for both SharePoint Online as well as SharePoint On-premises.

You can also check, Create, Update and Delete List items using JavaScript Object Model (JSOM) in SharePoint Online/2013/2016.

Create SharePoint List Item using Rest API

Now, we will discuss how to insert the SharePoint list item using Rest API in SharePoint.

Here I have an announcements list and I am trying to insert the value to the Title column only.

<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('Announcements')/Items";
var itemType = GetItemTypeForListName('Announcements');
$.ajax({
url: requestUri,
type: "POST",
data:JSON.stringify({'__metadata': { 'type': itemType }, 'Title': 'Announcement - 1' }),
headers: {
"accept":"application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest":$("#__REQUESTDIGEST").val()
},
success: onSuccess,
error: onError
});

function onSuccess(data) {
alert(data+ ' List Item Created');
}

function onError (error) {
alert(JSON.stringify(error));
}

function GetItemTypeForListName(name) {return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";}
});
});
</script>
<input type="button" id="btnClick" value="Create List Item"/>

Once you click on the button in the web part page, you can see the item is added to the SharePoint list.

create update and delete list items using rest api

Insert SharePoint List Item using Rest API (Dynamically)

In the above code, we are inserting an item to the SharePoint list where we are passing a hardcoded value. But we can make it to dynamic also.

Here we will design an HTML form with some controls.

Here I have a SharePoint list name as “MyCompanyInfo” which has two columns known as Title and Industry. In this particular example let us take two text boxes, one for Title and one for Industry and one Submit button. On click on the Submit button, the item will be added in the SharePoint Online list.

All the HTML code and Rest API code we will put inside a script editor web part inside a SharePoint web part page.

<div id="AddListData">
<div>
Title:
<br />
<input type="text" id="txtTitle" />
</div>
<div>
Industry:
<br />
<input type="text" id="txtIndustry" />
</div>
<br />
<div>
<input id="btnSubmit" type="button" value="Submit" />
</div>
</div>
<div id="divResult"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});

function bindButtonClick() {
$("#btnSubmit").on("click", function () {
addListItem();
});
}

function addListItem() {
var title = $("#txtTitle").val();
var industry = $("#txtIndustry").val();
var fullUrl =_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Companies')/items";

$.ajax({
url: fullUrl,
type: "POST",
data: JSON.stringify({
'__metadata': { 'type': 'SP.Data.CompaniesListItem' },
'Title': title,
'Industry': industry
}),

headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded(sender, args) {
$("#divResult").html("Item successfully added!");
}

function onQueryFailed() {
alert('Error!');
}
</script>

Once we save the page, the form will appear like below and the user can put title and industry and it will display successful message like below:

create update and delete list items using rest api sharepoint 2013

Now if you will look at the list, you can see the item added to the SharePoint list.

create update and delete list items using rest api sharepoint 2016

Update SharePoint List Item using Rest API

Now, we will see how to update a SharePoint list item using Rest API. You can use the below code to update the list item using Rest API in SharePoint.

You can also add the code into a script editor web part or content editor web part inside a web part page in SharePoint.

Here we are updating a list item having ID=2.

<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('Announcements')/getItemById(2)";
var itemType = GetItemTypeForListName('Announcements');
$.ajax({
url: requestUri,
type: "POST",
data:JSON.stringify({'__metadata': { 'type': itemType }, 'Title': 'Updated Announcement' }),
headers: {
"accept":"application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest":$("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"IF-MATCH":"*"
},
success: onSuccess,
error: onError
});

function onSuccess(data) {
alert('List Item Updated');
}

function onError(error) {
alert(JSON.stringify(error));
}

function GetItemTypeForListName(name) {return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";}
});
});
</script>

<input type="button" id="btnClick" value="Update List Item"/>

Now you can see, once you execute the code the SharePoint list item is updated.

create update and delete list items using rest api sharepoint

Delete SharePoint List Item using Rest API

Finally, we will see how to delete an item from the SharePoint list using Rest API.

Here it will delete the SharePoint list item which has item id=2.

<input type="button" id="btnClick" value="Delete List Item"/>

<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('Announcements')/getItemById(2)";
$.ajax({
url: requestUri,
type: "DELETE",
headers: {
"accept":"application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest":$("#__REQUESTDIGEST").val(),
"IF-MATCH":"*"
},
success: onSuccess,
error: onError
});

function onSuccess(data) {
alert('Item deleted');
}

function onError(error) {
alert(JSON.stringify(error));
}
});
});
</script>
create update and delete list items using rest api sharepoint online

You may like SharePoint Rest API tutorials:

Once you run the code, you can see the SharePoint list item got deleted.

This Rest API SharePoint tutorial, we discuss below point.
How to create list item using Rest API in SharePoint?
How to update list item using Rest API in SharePoint Online/2013/2016.
And how to delete list item using Rest API in SharePoint Online or SharePoint 2013/2016.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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 SharePointSky.com

  • […] Create, Update and Delete SharePoint List Item using Rest API […]

  • >