CRUD Operation On List Items Using JSOM In SharePoint 2013 - Part 2

In this article we will explore SharePoint functionality via JSOM.

Introduction

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 JSOM. I have explored the CRUD operation using Web Service in my previous article.

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

SharePoint

Retrieve the list items

Retrieve the list items

Here is the main code in detail:

  1. function retriveListItem()  
  2. {  
  3.     //Get the current context   
  4.     var context = new SP.ClientContext();  
  5.     var list = context.get_web().get_lists().getByTitle(‘companyInfo’);  
  6.     var caml = new SP.CamlQuery();  
  7.     caml.set_viewXml("<View><Query><OrderBy><FieldRef Name=’Company’ Ascending='TRUE' /></OrderBy></Query></View>");  
  8.     returnedItems = list.getItems(caml);  
  9.     context.load(returnedItems);  
  10.     context.executeQueryAsync(onSucceededCallback, onFailedCallback);  
  11. }  
  12.   
  13. function onSucceededCallback(sender, args)  
  14. {  
  15.     var enumerator = returnedItems.getEnumerator();  
  16.     //Formulate HTML from the list items   
  17.     var MainResult = 'Items in the Divisions list: <br><br>';  
  18.     //Loop through all the items   
  19.     while (enumerator.moveNext())  
  20.     {  
  21.         var listItem = enumerator.get_current();  
  22.         var companyName = listItem.get_item(“Company ");   
  23.                 var Industry = listItem.get_item(“Industry ");   
  24.                         MainResult += MainResult + companyName + "-" + Industry + "\n";  
  25.                     }  
  26.                     //Display the formulated HTML in the displayDiv element   
  27.                 displayDiv.innerHTML = MainResult;  
  28.             }  
  29.             //This function fires when the query fails   
  30.         function onFailedCallback(sender, args)  
  31.         {  
  32.             //Formulate HTML to display details of the error   
  33.             var markup = '<p>The request failed: <br>';  
  34.             markup += 'Message: ' + args.get_message() + '<br>';  
  35.             //Display the details   
  36.             displayDiv.innerHTML = markup;  
  37.         } 
  38.    }
Create list item

Create list item

Here is the main code in detail:
  1. function AddListItem()  
  2. {  
  3.     var listTitle = "companyInfo";  
  4.     //Get the current client context  
  5.     context = SP.ClientContext.get_current();  
  6.     var airportList = context.get_web().get_lists().getByTitle(listTitle);  
  7.     //Create a new record  
  8.     var listItemCreationInformation = new SP.ListItemCreationInformation();  
  9.     var listItem = airportList.addItem(listItemCreationInformation);  
  10.     //Set the values  
  11.     Var industryVal = $("#Industry").val();  
  12.     var Company = $("#Company").val();  
  13.     listItem.set_item('Industry', +industryVal);  
  14.     listItem.set_item('Company', +new item);  
  15.     listItem.update();  
  16.     context.load(listItem);  
  17.     context.executeQueryAsync(AddListItemSucceeded, AddListItemFailed);  
  18. }  
  19.   
  20. function AddListItemSucceeded()  
  21. {  
  22.     retriveListItem();  
  23. }  
  24.   
  25. function AddListItemFailed(sender, args)  
  26. {  
  27.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  28. }  
Update list item

Update list item

Here is the main code in detail:
  1. function updateListItem()  
  2. {  
  3.     var ListName = "companyInfo";  
  4.     var context = new SP.ClientContext.get_current(); // the current context is taken by default here  
  5.     //you can also create a particular site context as follows  
  6.     var lstObject = context.get_web().get_lists().getByTitle(ListName);  
  7.     this.lstObjectItem = lstObject.getItemById(1);  
  8.       
  9.     Var industryVal = $("#Industry").val();  
  10.     var Company = $("#Company").val();  
  11.     lstObjectItem.set_item('Industry', “+industryVal + ”);  
  12.     lstObjectItem.set_item('Company', ”+Company + ”);  
  13.     lstObjectItem.update();  
  14.         context.executeQueryAsync(Function.createDelegate(thisthis.onSuccess), Function.createDelegate(thisthis.onFailure));  
  15. }  
  16.   
  17. function onSuccess()  
  18. {  
  19.     retriveListItem();  
  20. }  
  21.   
  22. function onFailure(sender, args)  
  23. {  
  24.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  25. }  
Delete list item

Delete list item

Here is the main code in detail:
  1. function deleteListItem()  
  2. {  
  3.     var listTitle = "companyInfo";  
  4.     //get the current client context  
  5.     context = SP.ClientContext.get_current();  
  6.     var airportList = context.get_web().get_lists().getByTitle(listTitle);  
  7.     //get the list item to delete  
  8.     var listItem = airportList.getItemById(1);  
  9.     //delete the list item  
  10.     listItem.deleteObject();  
  11.     context.executeQueryAsync(DeleteItemSucceeded, DeleteItemFailed);  
  12. }  
  13.   
  14. function DeleteItemSucceeded()  
  15. {  
  16.     retriveListItem();  
  17. }  
  18.   
  19. function DeleteItemFailed(sender, args)  
  20. {  
  21.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  22. }  
Summary

In this article we explored SharePoint JSOM for CRUD operations on list items level. Hope it will be helpful.