Create, Update, Delete and Display List items using JavaScript Object Model (JSOM) in SharePoint Online/2013/2016

create update and delete list items using javascript
SharePoint deveopment training course

This JSOM SharePoint tutorial, we will discuss how to create, update and delete list item using JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

If you are new to SharePoint Online client-side development, then you should know the CRUD operations using JSOM in SharePoint.

Here I have a custom SharePoint Online list which has two columns: Title and Description. But the same code also you can use to create, update and delete list items by using jsom in SharePoint 2013, SharePoint 2016 or SharePoint 2019.

Create List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see, how to create a list item using Jsom (JacvaScript object model) in SharePoint Online or SharePoint 2013/2016/2019.

The below jsom code you can write in a script editor web part or also you can use inside a SharePoint hosted add-in or apps.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(createListItem,'sp.js'); 

function createListItem() {
var clientContext = new SP.ClientContext.get_current();

var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var itemInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(itemInfo);
listItem.set_item('Title', 'Item-1');
listItem.set_item('Description', 'Item-1 Description');
listItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item created successfully !');
}

function onQueryFailed(sender, args) {
alert('Could not able to update item: ' + args.get_message());
}
</script>

Once you run the code, then you can see the list item will be created using jsom like below:

create update and delete list items using javascript

Insert item to SharePoint list using jsom (dynamically)

In the previous example, we saw how to insert item to SharePoint list using JavaScript. But the data which we were inserting was static.

We can also make it dynamic, here in this example, I have added a textbox and a button and on the button click we are saving the textbox value to the SharePoint list.

The below JSOM code, you can add inside a script editor web part in SharePoint Online or SharePoint 2013/2016 web part page.

<input id="txtTitle" name="txtTitle" type="text" />

<input name="ADD" id="btnAdd" type="submit" value="Add Item to List" />
<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("#btnAdd").click(function () {
var title = $("#txtTitle").val();
AddListItem(title);
});
});
function AddListItem(TitleField) {
var ListName = "Employee";
var context = new SP.ClientContext.get_current();
var lstObject = context.get_web().get_lists().getByTitle(ListName);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = lstObject.addItem(listItemCreationInfo);
newItem.set_item('Title', TitleField);
newItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFailure));
}
function onSuccess() {
alert('Item created');
}
function onFailure(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

This is how we can insert data to the SharePoint list using javascript object model (jsom) in SharePoint.

Update List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see how to update the list item using the javascript object model (jsom) code. Here I have taken the list item id hardcoded.

Here we will update the list item whose ID=2.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(updateListItem,'sp.js'); 

function updateListItem() {
var clientContext = new SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var listItem = list.getItemById(2);
listItem.set_item('Title', 'Updated List Item Title');
listItem.set_item('Description', 'Updated List Item Description');
listItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item updated successfully !');
}

function onQueryFailed(sender, args) {
alert('Could not able to update item: ' + args.get_message());
}
</script>

Like create list item code, you can also use the update list item code inside a script editor or content editor web part in a web part page in SharePoint.

The output will come like below:

create update and delete list items using javascript object model

Delete List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see how we can delete a list item using jsom in SharePoint. The same code we can use to delete SharePoint list item using jsom in SharePoint 2013/2016/2019.

Here we will delete the list item whose id =2.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(deleteListItem,'sp.js'); 

function deleteListItem() {
var clientContext = new SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var listItem = list.getItemById(2);
listItem.deleteObject();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item deleted');
}

function onQueryFailed(sender, args) {
alert('Could not able to delete item: ' + args.get_message());
}

</script>

Once you run the code, you can see the item will be deleted from the SharePoint list. This is how we can delete an item from a SharePoint list using javascript object model.

create update and delete list items using jsom sharepoint

The above code will delete a single item, but if you want to delete all items from a SharePoint list, then you can read a tutorial on how to delete all items from a SharePoint list using jsom?

Display SharePoint list items using JSOM (JavaScript object model)

Now, we will see how to retrieve list items from SharePoint list using the JavaScript object model (jsom) in SharePoint Online Office 365 sites.

The same code also works for SharePoint Online as well as SharePoint 2013/2016.

In this particular example, I have a SharePoint Online list which has columns like:

  • Title
  • FirstName
  • LastName

And in that SharePoint list, there were few records inside it. The out of box list looks like below:

display list items using jsom in SharePoint
display list items using jsom in SharePoint

Here we will show try to retrieve this list data by using jsom.

Here let us put our jsom code inside a script editor web part or content editor web part, which we will add inside a web part page in SharePoint.

Below is the full jsom code to display SharePoint list using JSOM.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="divListItems"></div>
<script>
$(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('Employees');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded(sender, args) {
var listItemInfo = ";
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +
' <strong>Title:</strong> ' + oListItem.get_item('Title') +
' <strong>FirstName:</strong> ' + oListItem.get_item('FirstName') +
' <strong>LastName:</strong> ' + oListItem.get_item('LastName') +
'<br />';
}
$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>

If you save the code and refresh the page you can see the list items like below:

display list items using javascript in SharePoint
display list items using javascript in SharePoint

Here we have passed an empty caml query.

var camlQuery = new SP.CamlQuery();
this.collListItem = oList.getItems(camlQuery);

But if you want to retrieve items based on certain filter conditions then you can write the CAML query and can pass it like below:

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
'<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>2</Value></Geq></Where></Query>' +
'<RowLimit>10</RowLimit></View>'
);

var collListItem = oList.getItems(camlQuery);

The above query will return results where the ID value greater than or equal to 2.

This is how we can display SharePoint list items using the JavaScript object model (jsom).

You may also like following SharePoint jsom tutorials:

This SharePoint tutorial, we discussed:
How to create list item using jsom in SharePoint.
How to update list item using the javascript object model in SharePoint Online or SharePoint 2013/2016/2019.
How to delete list item by item id using jsom in SharePoint? Also, we saw how to display SharePoint list item using JSOM in SharePoint.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →