CRUD Operation On List Items Using JSOM In SharePoint 2013

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.

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

<table>
   <tbody>
      <tr>
         <td>Employee Name:</td>
         <td> 
            <input type="text" name="EmployeName"  id="txtEmpName"/> 
         </td>
      </tr>
      <tr>
         <td>Father Name:</td>
         <td> 
            <input type="text" name="FatherName" id="txtFatherName"/> 
         </td>
      </tr>
  
   <tr>
         <td col=2>
<input type="submit" value="Add" id="btAdd" onclick="AddListItem();">
<input type="submit" value="Update" id="btUpdate" onclick="UpdateListItem();">
<input type="submit" value="View" id="btView"  onclick="FetchAllItems();">
<input type="submit" value="Delete" id="btDelete" onclick="DeleteItem();">
</td>
         
      </tr>
 
   </tbody>
</table>
<div id="ResultDiv">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  

ExecuteOrDelayUntilScriptLoaded(AddListItem() ,"sp.js");
ExecuteOrDelayUntilScriptLoaded(UpdateListItem() ,"sp.js");
ExecuteOrDelayUntilScriptLoaded(DeleteItem() ,"sp.js");
ExecuteOrDelayUntilScriptLoaded(FetchAllItems() ,"sp.js");

var siteUrl = '/sites/PracticeSite';

function AddListItem()  
{  
var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('PracticeList');
var empName=$('#txtEmpName').val();
var fatherName=$('#txtFatherName').val();
        
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
        
    oListItem.set_item('Title',empName );   
oListItem.set_item('Father_x0020_Name',fatherName );  
        
    oListItem.update();

    clientContext.load(oListItem);
        
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}
function onQuerySucceeded() {

    alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


function UpdateListItem()  
{  
var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('PracticeList');

    this.oListItem = oList.getItemById(12);

    oListItem.set_item('Title', 'Utpal');

    oListItem.update();

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded() {

    alert('Item updated!');
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function DeleteItem()  
{  
this.itemId = 12;

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('PracticeList');

    this.oListItem = oList.getItemById(itemId);

    oListItem.deleteObject();

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded() {

    alert('Item deleted: ' + itemId);
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function FetchAllItems()  
{  
var context = new SP.ClientContext();  
    var list = context.get_web().get_lists().getByTitle('PracticeList');  
    var caml = new SP.CamlQuery();  
    caml.set_viewXml("<View><Query><Where><IsNotNull><FieldRef Name='LinkTitleNoMenu' /></IsNotNull></Where></Query></View>");  
    returnedItems = list.getItems(caml);  
    context.load(returnedItems);  
    context.executeQueryAsync(onSucceededCallback, onFailedCallback); 
}

function onSucceededCallback(sender, args)  
{  
    var enumerator = returnedItems.getEnumerator();  
    //Formulate HTML from the list items   
    var MainResult = 'Items in the Divisions list: <br><br>';  
    //Loop through all the items   
    while (enumerator.moveNext())  
    {  
        var listItem = enumerator.get_current();  
        var EmployeeName = listItem.get_item("Title");   
        var FatherName = listItem.get_item("Father_x0020_Name");   
        MainResult += MainResult + EmployeeName + "-" + FatherName + "\n";  
    }  
                    //Display the formulated HTML in the displayDiv element   
ResultDiv.innerHTML = MainResult;  
}  
            //This function fires when the query fails   
function onFailedCallback(sender, args)  
{  
            //Formulate HTML to display details of the error   
var markup = '<p>The request failed: <br>';  
markup += 'Message: ' + args.get_message() + '<br>';  
            //Display the details   
    ResultDiv.innerHTML = markup;  
}  


</script>