CRUD Operations On A SharePoint List Using REST API

In this article, I am going to explain how to perform a CRUD (Create, Read, Update, Delete) operation on a SharePoint list using REST API. The goal of this article is to provide a complete idea about CRUD (create, read, update and delete) operations in a SharePoint 2013 list using REST API.

Overview

• Create a web page for the user to perform CRUD operation on a SharePoint list.
• Write a script code for CRUD operation on SharePoint list, as below.

Procedure 1 - Create record

To create a new record from the end user inputs to a SharePoint list, we require an API as a medium between the webpage and the SharePoint database. Hence, we are going to use a REST API call to create a new record to the SharePoint list from a webpage.

By using the below code, you can create a new record to a SharePoint list.

$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items",
    type: "POST",
    headers: {
        "accept": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
        "content-Type": "application/json;odata=verbose"
    },
    data: "{__metadata:{'type':'SP.Data.YourlistnameListItem'},Title:"
    Ur input "}",
    /*where Title is column name and you can add more columns by splitting with ,*/
    success: function(data) {
        console.log(data.d.results);
    },
    error: function(error) {
        alert(JSON.stringify(error));
    }
});

Read record

This is the REST API call to retrieve the SharePoint list data to a webpage. By using the following code, you can retrieve the data from SharePoint list and you can display it in your webpage.

$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
        "content-Type": "application/json;odata=verbose"
    },
    success: function(data) {
        console.log(data.d.results);
    },
    error: function(error) {
        alert(JSON.stringify(error));
    }
});

Update record

This is the REST API call to update a SharePoint list item. Here, we must follow the below steps -

• Retrieve the data from a SharePoint list as we have explained in the "Read Record" section.
• Display the retrieved data on the webpage and make sure that it allows editing the inputs on the page.
• Create a Button for updating the record on the same page.
• On click of the Update button, please call the below REST API call to update the particular record in SharePoint list.
  

  $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items(Your record ID)",
      type: "POST",
      headers: {
          "accept": "application/json;odata=verbose",
          "X-RequestDigest": $("#__REQUESTDIGEST").val(),
          "content-Type": "application/json;odata=verbose",
          "IF-MATCH": "*",
          "X-HTTP-Method": "MERGE"
      },
      data: "{__metadata:{'type':'SP.Data.YourlistnameListItem'},Title:"
      Ur new input "}",
      /*where Title is column name and add your desired new data*/
      success: function(data) {
          console.log(data.d.results);
      },
      error: function(error) {
          alert(JSON.stringify(error));
      }
  });

Delete record

This is the REST API call to delete an item from the SharePoint list. Here, we must follow the below steps -

• Retrieve the data from a SharePoint list on which we are going to perform the deletion.
• Display the retrieved data on the webpage.
• Create a Button for deleting the record on the same page
• On click of the Delete button, please call the below REST API to delete the particular record from the SharePoint list.
  

  $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items(Your record ID)",
      type: "POST",
      async: false,
      headers: {
          "Accept": "application/json;odata=verbose",
          "X-Http-Method": "DELETE",
          "X-RequestDigest": $("#__REQUESTDIGEST").val(),
          "If-Match": "*"
      },
      success: function(data) {
          alert('deleted');
      },
      error: function(data) {
          alert('Failed to delete');
      }
  });

Conclusion

I hope this article will help you a lot while performing the CRUD operations on SharePoint list items.

Thank you😊...