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

 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.



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.    }
39. } 

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



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(this, this.onSuccess), Function.createDelegate(this, this.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



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.