Share via

SharePoint 2013: List Items CRUD Operation Using REST API (Part 3)

  • Article

Before reading this article, please go through the following article series:

**Introduction **

SharePoint 2013 has greatly expanded the REST services available to developers. With this, we have much more SharePoint functionality exposed via JSOM and Web Services. The goal of this article is to provide how to perform basic create, read, update, and delete (CRUD) operations on lists and list items with the REST services.

SharePoint REST endpoint Overview:

The following table contains typical REST endpoint URL examples to get you started working with SharePoint data. Prepend http://server/site/_api/ to the URL fragments shown in the table to construct a fully qualified REST URL. Below is a list of the basic commands used to get List Items from a SharePoint List through the SharePoint 2013 REST Services.

URL endpoint Description Supported HTTP Method
/_api/Web/Lists/ getbytitle('listname') Getting a list details by its title and updating it as well. Ifanyone changes your list title, your code will break. GET, POST
/_api/Web/Lists(guid'guid id of your list') Same as above but changing list title will not affect the code. GET, POST
/_api/Web/Lists/getbytitle(' listname ')/Fields Retrieving all fields associated with a list and add new fields GET, POST
/_api/Web/Lists/getbytitle('listname')/

Fields/getbytitle('fieldname')

 Getting details of a field, modifying and deleting it. GET, PUT, PATCH, MERGE, DELETE
/_api/Web/Lists/getbytitle('listname')

/Items

 Retrieving all items in a list and adding new items GET, POST
/_api/web/lists/getbytitle('listname')

/GetItemById(itemId) 

 

 This endpoint can be used to get, update and delete a single item. GET, PUT, PATCH, MERGE, DELETE
/_api/lists/ getbytitle (‘'listname')/items?$orderby=Title Order Your Results GET, POST
/_api/lists/ getbytitle (‘'listname')/items?$select=Title,Id Retrieve Selected Column Data value GET, POST
/_api/web/lists/getbytitle('listname')/Items/

?$select=Title,FieldName/Id&$expand= FieldName /Id

 Retrieving the lookup value GET, POST

Now, we will demo all the operations on list items, including retrieve, create, update and delete on list items.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/crud-operation-on-list-items-using-rest-api-services-in-shar/Images/image002.jpg

Retrieve the list items

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/crud-operation-on-list-items-using-rest-api-services-in-shar/Images/image003.png

Main code in detail:

  1. function retriveListItem() 
  2. { 
  3.  
  4.  $.ajax 
  5.  ({ 
  6.  url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('companyInfo')/items?$select=Company,Industry", 
  7.  type: type, 
  8.  data: data, 
  9.  headers: 
  10.  { 
  11.   "Accept": "application/json;odata=verbose", 
  12.   "Content-Type": "application/json;odata=verbose", 
  13.   "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
  14.   "IF-MATCH": "*", 
  15.   "X-HTTP-Method": null 
  16.  }, 
  17.  cache: false, 
  18.  success: function(data) 
  19.  { 
  20.   $("#ResultDiv").empty(); 
  21.   for (var i = 0; i < data.d.results.length; i++) 
  22.   { 
  23.   var item = data.d.results[i]; 
  24.   $("#ResultDiv").append(item.Company + "\t" + item.Industry + "<br/>"); 
  25.   } 
  26.  }, 
  27.  error: function(data) 
  28.  { 
  29.   $("#ResultDiv").empty().text(data.responseJSON.error); 
  30.  } 
  31.  }); 
  32. } 

Create list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/crud-operation-on-list-items-using-rest-api-services-in-shar/Images/image004.png

Here is the main code in detail:

  1. function AddListItem() 
  2. { 
  3.  var industryVal = $("#Industry").val(); 
  4.  var Company = $("#Company").val(); 
  5.  $.ajax 
  6.  ({ 
  7.  url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('companyInfo')/items", 
  8.  type: "POST", 
  9.  data: JSON.stringify 
  10.  ({ 
  11.   __metadata: 
  12.   { 
  13.   type: "SP.Data.TestListItem" 
  14.   }, 
  15.   Company: Company, 
  16.   Industry: industryVal 
  17.  }), 
  18.  headers: 
  19.  { 
  20.   "Accept": "application/json;odata=verbose", 
  21.   "Content-Type": "application/json;odata=verbose", 
  22.   "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
  23.   "X-HTTP-Method": "POST" 
  24.  }, 
  25.  success: function(data, status, xhr) 
  26.  { 
  27.   retriveListItem(); 
  28.  }, 
  29.  error: function(xhr, status, error) 
  30.  { 
  31.   $("#ResultDiv").empty().text(data.responseJSON.error); 
  32.  } 
  33.  }); 
  34. } 

Update list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/crud-operation-on-list-items-using-rest-api-services-in-shar/Images/image005.png

Here is the main code in detail:

  1. function updateListItem() 
  2. { 
  3.  var industryVal = $("#Industry").val(); 
  4.  $.ajax 
  5.  ({ 
  6.  url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('companyInfo')/items(7)", // list item ID 
  7.  type: "POST", 
  8.  data: JSON.stringify 
  9.  ({ 
  10.   __metadata: 
  11.   { 
  12.   type: "SP.Data.TestListItem" 
  13.   }, 
  14.   Industry: industryVal 
  15.  }), 
  16.  headers: 
  17.  { 
  18.   "Accept": "application/json;odata=verbose", 
  19.   "Content-Type": "application/json;odata=verbose", 
  20.   "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
  21.   "IF-MATCH": "*", 
  22.   "X-HTTP-Method": "MERGE" 
  23.  }, 
  24.  success: function(data, status, xhr) 
  25.  { 
  26.   retriveListItem(); 
  27.  }, 
  28.  error: function(xhr, status, error) 
  29.  { 
  30.   $("#ResultDiv").empty().text(data.responseJSON.error); 
  31.  } 
  32.  }); 

Delete list item

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/crud-operation-on-list-items-using-rest-api-services-in-shar/Images/image006.png

Here is the main code in detail:

  1. function deleteListItem() 
  2. { 
  3.  $.ajax 
  4.  ({ 
  5.  url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('companyInfo')/items(7)", 
  6.  type: "POST", 
  7.  headers: 
  8.  { 
  9.   "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
  10.   "IF-MATCH": "*", 
  11.   "X-HTTP-Method": "DELETE" 
  12.  }, 
  13.  success: function(data, status, xhr) 
  14.  { 
  15.   retriveListItem(); 
  16.  }, 
  17.  error: function(xhr, status, error) 
  18.  { 
  19.   $("#ResultDiv").empty().text(data.responseJSON.error); 
  20.  } 
  21.  }); 
  22. } 

Summary

In this article, we explored SharePoint 2013 REST API for (CRUD) operations on list items level. We’ve tried to explore CRUD operation using REST Services, JavaScript Client Side Object Model, and SOAP Services to work on the client side.

Credits

My Blog Reference