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.

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

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.

  1. $.ajax({
  2. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items",
  3. type: "GET",
  4. headers: {
  5. "accept": "application/json;odata=verbose",
  6. "content-Type": "application/json;odata=verbose"
  7. },
  8. success: function(data) {
  9. console.log(data.d.results);
  10. },
  11. error: function(error) {
  12. alert(JSON.stringify(error));
  13. }
  14. });

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.
    1. $.ajax({
    2. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items(Your record ID)",
    3. type: "POST",
    4. headers: {
    5. "accept": "application/json;odata=verbose",
    6. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    7. "content-Type": "application/json;odata=verbose",
    8. "IF-MATCH": "*",
    9. "X-HTTP-Method": "MERGE"
    10. },
    11. data: "{__metadata:{'type':'SP.Data.YourlistnameListItem'},Title:"
    12. Ur new input "}",
    13. /*where Title is column name and add your desired new data*/
    14. success: function(data) {
    15. console.log(data.d.results);
    16. },
    17. error: function(error) {
    18. alert(JSON.stringify(error));
    19. }
    20. });
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.
    1. $.ajax({
    2. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items(Your record ID)",
    3. type: "POST",
    4. async: false,
    5. headers: {
    6. "Accept": "application/json;odata=verbose",
    7. "X-Http-Method": "DELETE",
    8. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    9. "If-Match": "*"
    10. },
    11. success: function(data) {
    12. alert('deleted');
    13. },
    14. error: function(data) {
    15. alert('Failed to delete');
    16. }
    17. });
Conclusion

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

Thank you😊...