CRUD operations in SharePoint 2013 list using jsom

sharepoint 2013 crup operation jsom.jpg

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 (JavaScript Object Model) in SharePoint 2013.  You can also read my previous article on CRUD operation using Web Service and jQuery in SharePoint 2013. Here we will discuss on: inser item to SharePoint online list item using jsom, retrieve list items using jsom in SharePoint 2013, how to update list item using jsom in SharePoint 2013 and also we will see how we can delete list item using jsom in SharePoint 2013.

Read some SharePoint tutorials below:

sharepoint 2013 crup operation jsom.jpg
sharepoint 2013 crup operation jsom.jpg

Retrieve list items using jsom (javascript object model) in SharePoint 2013:



sharepoint 2013 crup operation jsom 1.png
sharepoint 2013 crup operation jsom 1.png

Here is the main code in detail:
function retriveListItem()
{
//Get the current context
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(‘companyInfo’);
var caml = new SP.CamlQuery();
caml.set_viewXml(“<View><Query><OrderBy><FieldRef Name=’Company’ Ascending=’TRUE’ /></OrderBy></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 companyName = listItem.get_item(“Company “);
var Industry = listItem.get_item(“Industry “);
MainResult += MainResult + companyName + “-” + Industry + “\n”;
}
//Display the formulated HTML in the displayDiv element
displayDiv.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
displayDiv.innerHTML = markup;
}
}
}

Create list item using jsom (javascript object model) in SharePoint 2013:

sharepoint 2013 create list item jsom.jpg
sharepoint 2013 create list item jsom.jpg




Here is the main code in detail:
function AddListItem()
{
var listTitle = “companyInfo”;
//Get the current client context
context = SP.ClientContext.get_current();
var airportList = context.get_web().get_lists().getByTitle(listTitle);
//Create a new record
var listItemCreationInformation = new SP.ListItemCreationInformation();
var listItem = airportList.addItem(listItemCreationInformation);
//Set the values
Var industryVal = $(“#Industry”).val();
var Company = $(“#Company”).val();
listItem.set_item(‘Industry’, +industryVal);
listItem.set_item(‘Company’, +new item);
listItem.update();
context.load(listItem);
context.executeQueryAsync(AddListItemSucceeded, AddListItemFailed);
}

function AddListItemSucceeded()
{
retriveListItem();
}

function AddListItemFailed(sender, args)
{
alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

Update list item using jsom (javascript object model) in SharePoint 2013:

sharepoint 2013 update list item jsom.jpg
sharepoint 2013 update list item jsom.jpg

Here is the main code in detail:
function updateListItem()
{
var ListName = “companyInfo”;
var context = new SP.ClientContext.get_current(); // the current context is taken by default here
//you can also create a particular site context as follows
var lstObject = context.get_web().get_lists().getByTitle(ListName);
this.lstObjectItem = lstObject.getItemById(1);

Var industryVal = $(“#Industry”).val();
var Company = $(“#Company”).val();
lstObjectItem.set_item(‘Industry’, “+industryVal + ”);
lstObjectItem.set_item(‘Company’, ”+Company + ”);
lstObjectItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));
}

function onSuccess()
{
retriveListItem();
}

function onFailure(sender, args)
{
alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

Delete list item using jsom (javascript object model) in SharePoint 2013:



sharepoint 2013 delete list item jsom.jpg
sharepoint 2013 delete list item jsom.jpg

Here is the main code in detail:
function deleteListItem()
{
var listTitle = “companyInfo”;
//get the current client context
context = SP.ClientContext.get_current();
var airportList = context.get_web().get_lists().getByTitle(listTitle);
//get the list item to delete
var listItem = airportList.getItemById(1);
//delete the list item
listItem.deleteObject();
context.executeQueryAsync(DeleteItemSucceeded, DeleteItemFailed);
}

function DeleteItemSucceeded()
{
retriveListItem();
}

function DeleteItemFailed(sender, args)
{
alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

Summary:


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

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →