SharePoint Online: Working with list items using Rest API

Introduction

Here we will discuss how we can insert an item to SharePoint list using Rest API in SharePoint Online. Also, we will discuss how we can delete items from SharePoint list using Rest API.

Add Items to List using Rest API

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 textboxes, 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.

HTML Code

<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>

Rest API Code

<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 siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/lists/GetByTitle('MyCompanyInfo')/items";
$.ajax({
url: fullUrl,
type: "POST",
data: JSON.stringify({
'__metadata': { 'type': 'SP.Data.MyCompanyInfoListItem' },
'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:

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

Delete Items to List using Rest API

Now we will discuss how we can delete items from SharePoint list using Rest API in SharePoint Online. Here we will delete list item based on list item id. Here let us take a textbox where the user can put the item id in the textbox. On submit button, the item will get deleted from the list.

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

Here we have a list name as MyCompanyInfo which has one item and whose ID is 2.

HTML Code

<div>
Enter ID to Delete: <input type="text" id="txtId" />
</div>
<div>
<input id="btnSubmit" type="button" value="Submit" />
</div>
<div id="divResult"></div>

Rest API Code

Here we have retrieved the item id from the textbox.

<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  () {
deleteListItem();
});
}
function deleteListItem() {
var id = $("#txtId").val();
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/lists/GetByTitle('MyCompanyInfo')/items(" + id + ")";
 
$.ajax({
url: fullUrl,
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"IF-MATCH": "*"
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(sender, args) {
$("#divResult").html("Item successfully deleted!");
}
function onQueryFailed() {
alert('Error!');
}
</script>

Once you Save the page, it will display like below. Once user put the item id and click on Submit button it will delete the list item and it will display the successful message.

Now if you will check the list, you will not find the item inside the list like below:

Conclusion

Here we have discussed how we can add an item to a SharePoint list using Rest API also we have discussed how we can delete list item by id using Rest API in SharePoint Online.