CRUD Operations using JSOM in SharePoint

SharePoint Online training courses

This tutorial is all about, crud operations using jsom in SharePoint. We will see a few jsom SharePoint examples like below:

  • How to add item to sharepoint list using javascript object model (jsom)
  • How to update SharePoint List Item using JavaScript object model (JSOM)
  • How to get SharePoint list items using JavaScript object model (JSOM)
  • How to retrieve SharePoint list items and display in hyperlink using jsom
  • How to display SharePoint List Items in Div using JSOM
  • How to Get SharePoint list item by id using jsom (JavaScript object model)

Let us get started with the crud operations in SharePoint online using jsom.

Add item to SharePoint list using JavaScript

In this SharePoint jsom tutorial, we will discuss how to add or insert an item to the SharePoint Online list using JavaScript Object Model (jsom). In the same way, we can insert an item to the SharePoint 2013 list using jsom.

Here we have a SharePoint list as “ComapnyInfoList” in SharePoint online site which has below columns:

  • User Name (single-line text )
  • Address (Multiline textbox)
  • Gender (Choice)
  • Country (Choice / Dropdown list)
  • Submission Date (Date and Time)

Insert item to SharePoint Online list using JavaScript

Now, we will see how to insert an item to the SharePoint Online list using the JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

Here, we will create the HTML file, JavaScript (.JS) file, and CSS file.

HTML File:

Below is the HTML file which contains our code.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/UserInfoJs.js"></script>
<meta charset="utf-8" />
<title>My Html</title>
</head>
<body>
<h2>Information Form</h2>
Username:<br>
<input type="text" name="Username" id="usrtxt" />
<br>
Password:<br>
<input type="password" name="password" id="usrpwd" />
<br>
EmailID:<br>
<input type="email" name="EmailID" id="usrid" />
<br>
Address:<br>
<textarea rows="4" cols="50" id="addtxt"></textarea>
<br>
Gender:<br>
<div id="gend">
<input type="radio" name="gender" value="Male" id="gen0" /> Male
<input type="radio" name="gender" value="Female" id="gen1" /> Female
</div>
<br />
<select id="dropcount">
<option value="1">India</option>
<option value="2">Pakistan</option>
<option value="3">Srilanka</option>
<option value="3">Australia</option>
</select>
<br />
SubmissionDate:<br />
<input type="date" id="SubmDate" title="Submitdate">
<br /><br />
<input type="submit" value="Submit" id="btnSubmit" />
<br />
<p id="pTitle"></p>
</body>
</html>

In the above HTML file, for each control, we have given the ID attribute so that we can retrieve the control values using jQuery and control ID.

JavaScript (.JS) File

Below is the JavaScript (.js) file which contains our JavaScript object model (JSOM) code.

$(document).ready(function () {
$("#btnSubmit").click(function () {
insertitemtolist();
});
});
function insertitemtolist() {
var username = $("#usrtxt").val();
var password = $("#usrpwd").val();
var emailId = $("#usrid").val();
var address = $("#addtxt").val();
var gender = $("input[name='gender']:checked").val();
var country = $("#dropcount option:selected").text();
var myDate = new Date($("input[title='Submitdate']").val());
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
var item = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(item);
oListItem.set_item('Title', username);
oListItem.set_item('Password', password);
oListItem.set_item('EmailID', emailId);
oListItem.set_item('Address', address);
oListItem.set_item('Gender', gender);
oListItem.set_item('Country', country);
oListItem.set_item('SubmissionDate', myDate);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
$("#pTitle").html("successfully executed");
}
function onQueryFailed(sender, args) {
alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here we added the button click() function within the ready() function.

In the button click we are calling a JavaScript function insertitemtolist().

We can retrieve the SharePoint list using jsom code like below:

var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');

Then we can set the values to the SharePoint list column like below:

oListItem.set_item('Title', username);

Then upload these two files (HTML File, JS File) in the Site Assets library in SharePoint Online.

Now, create a web part page and Edit the page and then click on Add a web part link.

Then you can add a content editor web part to the SharePoint web part page.

add item to sharepoint list using jsom
add item to sharepoint list using jsom

Once the user fill the form and click on the submit button, the data will be saved to the SharePoint Online list.

The data can be visible in the SharePoint list.

crud operations using jsom in sharepoint
crud operations using jsom in sharepoint

This is how to add or insert an item to the SharePoint Online list using JavaScript Object Model (jsom). In the same way, we can insert items to the SharePoint 2013/2016 list using jsom.

Update SharePoint List Item using JavaScript object model (JSOM)

Now, let us see, how to update a List Item by using JSOM (JavaScript Object Model) in SharePoint Online, SharePoint 2013, or SharePoint 2016.

Update SharePoint List Item using JavaScript

Here, I have a SharePoint list which has a few columns like below:

  • User Name (single line text )
  • Address (Multiline textbox)
  • Gender (Choice)
  • Country (Choice / Dropdown list)
  • Submission Date (Date and Time)

We will update the List item to the above list programmatically using jsom in SharePoint.

HTML Input Form:

Here I have created an HTML form according to the SharePoint list.

Here the HTML File Code named as (UserInfoHtml.html) is given below:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Update.js"></script>
<meta charset="utf-8" />
<title>My HTML Form</title>
</head>
<body>
<h2>Editing Form</h2>
Username:<br>
<input type="text" name="Username" id="usrtxt" />
<br>
Password:<br>
<input type="password" name="password" id="usrpwd" />
<br>
EmailID:<br>
<input type="email" name="EmailID" id="usrid" />
<br>
Address:<br>
<textarea rows="4" cols="50" id="addtxt"></textarea>
<br>
Gender:<br>
<div id="gend">
<input type="radio" name="gender" value="Male" id="gen0" /> Male
<input type="radio" name="gender" value="Female" id="gen1" /> Female
</div>
<br />
Country:<br />
<select id="dropcount">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Srilanka">Srilanka</option>
<option value="Australia">Australia</option>
</select>
<br />
SubmissionDate:<br />
<input type="date" id="SubmDate" title="Submitdate">
<br /><br />
<input type="submit" value="Update" id="btnUpdate" />
<br />
<p id="pTitle"></p>
</body>
</html>

In the above HTML file, for each control, we have given the ID attribute so that we can update the control values by ID using jsom.

JS Code:

Now create a .JS File whereas I created “UserInfoJs” which will have the JSOM Code to update the SharePoint Online list item.

The JS file Code(UserInfoJs.js) is given below:

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
$("#btnUpdate").click(function () {
updateListItemByID();
});
});
var masterListItem;
function retrieveListItems() {
var id = GetParameterValues('MyID');
getitemsbyID(id);
}
function getitemsbyID(itemID) {
var clientContext = new SP.ClientContext.get_current();
var masterlist = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
masterListItem = masterlist.getItemById(itemID);
clientContext.load(masterListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
$("#usrtxt").val(masterListItem.get_item('Title'));
$("#usrpwd").val(masterListItem.get_item('Password'));
$("#usrid").val(masterListItem.get_item('EmailID'));
$("#addtxt").html(masterListItem.get_item('Address'));
if (masterListItem.get_item('Gender') == "Male") {
$("#gen0").attr('checked', 'checked');
}
else if (masterListItem.get_item('Gender') == "Female") {
$("#gen1").attr('checked', 'checked');
}
$("#dropcount").val(masterListItem.get_item('Country'));
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#SubmDate').val(today);
}
function onQueryFailed(sender, args) {
alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
function updateListItemByID() {
var id = GetParameterValues('MyID');
var username = $("#usrtxt").val();
var password = $("#usrpwd").val();
var emailId = $("#usrid").val();
var address = $("#addtxt").val();
var gender = $("input[name='gender']:checked").val();
var country = $("#dropcount option:selected").text();
var myDate = new Date($("input[title='Submitdate']").val());
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
var oListItem = oList.getItemById(id);
oListItem.set_item('Title', username);
oListItem.set_item('Password', password);
oListItem.set_item('EmailID', emailId);
oListItem.set_item('Address', address);
oListItem.set_item('Gender', gender);
oListItem.set_item('Country', country);
oListItem.set_item('SubmissionDate', myDate);
oListItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failue));
}
function success() {
alert('Item updated!');
}
function failue(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here, we have updated the SharePoint list item, by using the Item by ID using JSOM Code.

Create a updateListItemByID() function for updating. Here I have retrieved all the List items by using JQuery. Now suppose we have to retrieve the “Title” value. So the code is given below-

var username = $("#usrtxt").val();

Similarly, I retrieved all the List item values like “drop down”, “radio button”, “date” etc by using their specific ID attributes with different JQuery Code.

Then after I set all the List item value by using the below code-

oListItem.set_item('Title', username);

Similarly, We can set all the values like text field, drop-down, radio button by using their specific Code using JQuery which is mentioned above.

Then upload these two files(UserInfoHtml.html File, UserInfoJs.js File) in the “Site Assets”.

Once all the files are uploaded to the Site Assets library. Then create a web part page and Edit the page and then click on “Add a web part” link, Then it will open the Web part categories in the ribbon. From the web part categories, select “Media and Content” and then from the Parts select “Content Editor”.

By clicking on the “Edit web part”, we can give the HTML File path into the edit web part. Then after the Html file will be displayed on that Web Part Page after the “Stop Editing” like the below screenshot-

update list item using jsom in sharepoint online
update list item using jsom in sharepoint online

Here, we saw how to update a List Item by id using JSOM in SharePoint Online or SharePoint 2013/2016.

Get SharePoint list items using JavaScript

In this jsom SharePoint 2013 example, we will discuss how to retrieve list items using the javascript object model (jsom) in SharePoint online.

Here we have to retrieve list items from a task list using the javascript object model (jsom) in SharePoint Online and will display in hyperlinks.

Here I have created a task list in SharePoint Online site and we had added some items to the list.

get sharepoint list items using javascript sharepoint 2013
get sharepoint list items using javascript sharepoint 2013

Here I have created an HTML file and js file. In the HTML file, we have the HTML code which we are adding in a content editor web part. And in the js file, we have the jsom SharePoint 2013 code.

HTML File

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SiteAssets/Jsomfile/Tasklist.js"></script>
<title>TASK LIST</title>
</head>
<body>
<p style="font-size:20px;" width="500px;" id="Ptask"></p>
</body>
</html>

JavaScript (.JS file)

Below is the js file which contains the jsom code. And we are calling our function to retrieve list items in the ExecuteOrDelayUntilScriptLoaded method.

// JavaScript source code
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrivetasklistitems, "sp.js");
});
var colltaskListItem;
function retrivetasklistitems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('TaskList');
var camlQuery = new SP.CamlQuery();
colltaskListItem = oList.getItems(camlQuery);
clientContext.load(colltaskListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.OnQuerySucceeded),
Function.createDelegate(this, this.OnQueryFailed));
}
function OnQuerySucceeded(sender, args) {
var listItemEnumerator = colltaskListItem.getEnumerator();
var tasks = '';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/Lists/TaskList/DispForm.aspx?ID=" + oListItem.get_item('ID');
tasks += "<a href='" + url + "'>" + oListItem.get_item('Title') + "</a>" + "<br />";
}
$("#Ptask").html(tasks);
}
function OnQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Now create a web part page in SharePoint and then add a content editor web part. I had given the HTML file path in the content editor now we can find our TaskList on the web part page.

sharepoint javascript get list items
sharepoint javascript get list items

Here, we saw how to retrieve list items using the javascript object model (jsom) in sharepoint online.

Retrieve SharePoint list items and display in hyperlink using jsom

Now, let us see, how to retrieve SharePoint list items and display them in the hyperlink using JSOM (JavaScript Object Model).

Here I have a SharePoint Online list that has the below columns and also I have added a few items in the SharePoint list:

  • Title
  • Modified
crud operation in sharepoint using jsom
crud operation in sharepoint using jsom

Create HTML Input Form

Here, I have created an HTML file which code looks like below. Here also, I have also added .js, .css and jQuery files.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/NoticeJS.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/AnnounceStyle.css">
<meta charset="utf-8" />
<title>ANNOUNCEMENT LIST</title>
</head>
<body>
<p id="Ptitle"></p>
</body>
</html>

Create .JS File

Here, I have created a JavaScript (.js) file which contains the JSOM code to retrieve SharePoint list items. The .js code looks like below:

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CompanyAnnouncement');
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 listItemEnumerator = collListItem.getEnumerator();
var announcements ='';
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CompanyAnnouncement/DispForm.aspx?ID=" + oListItem.get_item('ID');
announcements += "<a href='" + url + "'>" + oListItem.get_item('Title') + "</a>" + "<br />";
}
$("#Ptitle").html(announcements);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here I am using the ExecuteOrDelayUntilScriptLoaded method which will call our retrieveListItems method after SP.js file loaded successfully.

Here, in the code I have created the URL like below:

announcements += "<a href='" + url + "'>" + oListItem.get_item('Title') + "</a>" + "<br />";

At last I have binded all the Item of “AnnouncementList” in the paragraph<P> tag using its specific ID attribute as below-

$("#Ptitle").html(announcements);

Then you can add all the HTML, JS and CSS files to the Site Assets library in the SharePoint site.

Then create a web part page and Edit the page and then click on Add a web part link. From there we can create a content editor web part to the web part page.

Then edit the web part and provide the HTML file path.

retrieve list items using javascript sharepoint 2013
retrieve list items using javascript sharepoint 2013

Here, we checked, how to retrieve SharePoint list items and display in a hyperlink using the JavaScript object model (JSOM) in SharePoint Online or SharePoint 2013/2016.

Display SharePoint List Items in Div using JSOM

Now, in this crud operations using javascript in sharepoint 2013 demo, let us see, how to display list items in Div by using JSOM (JavaScript Object Model) in SharePoint Online.

In this particular example, I have a SharePoint list as ComapnyLaptopInfo in SharePoint Online site which has below columns:

  • Laptop Name(“Single line of text”)
  • Laptop Image(“Hyperlink” which is having the image URL)
  • Description(“Multi-line of text”)

Also, I have added a few items to the SharePoint list.

display SharePoint List Items in Div using JSOM
How to retrieve sharepoint list items using jsom

Now,

Create HTML Input Form

First, I have created an HTML form which looks like below:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/LaptopJsFile.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/LaptopStyle.css">
<meta charset="utf-8" />
<title>LAPTOP INFORMATION</title>
</head>
<body>
<p id="laptopinfo"></p>
</body>
</html>

Create JavaScript (.JS) File

Now, we will create a .js (JavaScript) file that will have some JSOM code for retrieving SharePoint list items including hyperlink and image URL field.

The js code looks like below:

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var siteUrl = _spPageContextInfo.siteServerRelativeUrl;
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CompanyLaptopInfo');
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 listItemEnumerator = collListItem.getEnumerator();
var mytable = "<table>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CompanyLaptopInfo/DispForm.aspx?ID=" + oListItem.get_item('ID');
var imgurl = oListItem.get_item('LaptopImage').get_url();
mytable += "<tr><td><img class=\'laptop\' src='" + imgurl + "'><a class=\'LaptopTitle\' href='" + url + "'>" + oListItem.get_item('Title') + "</a><br /><p class=\'LaptopText\'>" + oListItem.get_item('Description') + "</p></td></tr>";
}
mytable += "</table>";
$("#laptopinfo").html(mytable);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here I am using the ExecuteOrDelayUntilScriptLoaded method which will call our retrieveListItems method after SP.js file loaded successfully.

Here, I have created a div, which we will be using to display all the list items.

Then create a variable named url and give the Hyperlink URL path in that variable within the while loop condition. The hyperlink code is given below:

var url = "https://onlysharepoint2013.sharepoint.com/sites/Raju/Lists/CompanyLaptopInfo/DispForm.aspx?ID=" + oListItem.get_item('ID');

Similarly get the image URL by using below code:

var imgurl = oListItem.get_item('LaptopImage').get_url();

Then within the “mytable” variable, set the image URL, Hyperlink URL and as well as Description within the <tr> and <td> tag. So that it will display systematically.

The code is given below:

mytable += "<tr><td><img class=\'laptop\' src='" + imgurl + "'><a class=\'LaptopTitle\' href='" + url + "'>" + oListItem.get_item('Title') + "</a><br /><p class=\'LaptopText\'>" + oListItem.get_item('Description') + "</p></td></tr>";

At last, I have bound all the Items from the SharePoint list in the paragraph <P> tag using its specific ID attribute as below-

$("#laptopinfo").html(mytable);

Create .CSS File

Now, we can add some CSS code to make some styling our elements.

The Style sheet code looks like below:

img.laptop {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 70px;
height: 75px;
float: left;
}
img.laptop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
a.LaptopTitle {
color: blueviolet;
font-family: "Georgia", Times, serif;
font-size:20px;
}
a.LaptopTitle:visited {
color: yellowgreen;
}
a.LaptopTitle:hover {
color: red;
text-decoration: underline;
}
p.LaptopText {
font-size: 17px;
font-style: italic;
font-family: "Georgia", Times, serif;
}

Then upload the HTML, JS file to the Site Assets library in SharePoint.

Then create a web part page and Edit the page and then click on “Add a web part” link, Then it will open the Web part categories in the ribbon.

From the web part categories, select “Media and Content” and then from the Parts select the Content Editor web part.

By clicking on the “Edit web part”, we can give the HTML File path into the edit web part. Then after the Html file will be displayed on that Web Part Page after the “Stop Editing” like the below screenshot-

crud operation using javascript in sharepoint online
crud operation using javascript in sharepoint online

Here, we learned how to display SharePoint list items in a Div by using JSOM (JavaScript Object Model).

Get SharePoint list item by id using jsom (JavaScript object model)

Now, let us see, how to retrieve list item by id using javascript object model (jsom) in SharePoint Online/2016/2013. By using SP.List.getItemById Method, we can get list item by id in JavaScript in SharePoint.

We can retrieve list item by item id using jsom (javascript object model) SharePoint online, Below is the JavaScript method which I wrote to retrieve the details by id.

You can use it inside a web part page in a script editor web part or you can use it inside any SharePoint hosted add-in.

SP.List.getItemById Method (sp.js) to get item by Id in SharePoint

In sp.js, we can use SP.List.getItemById Method to retrieve list item by Id in SharePoint Online or SharePoint 2013/2016.

Syntax: SP.List.getItemById();

var listItem = list.getItemById(5);

Get list item by id in SharePoint Online/2016/2013 using javascript object model (jsom)

Below is the jsom code to get list item by id using jsom in SharePoint Online/2016/2013

function getListItemDetails(id) {
var ctx = new SP.ClientContext.get_current();
this.website = ctx.get_web();
this.listCollection = website.get_lists();
this.oList = listCollection.getByTitle('MyTestList');
this.oItem = oList.getItemById(id);
ctx.load(oItem);
ctx.load(oItem, 'Include(Id)');
ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
}
function onSuccess(sender, args) {
alert(" ID: " + oItem.get_id());
}
function onFail(sender, args) {
alert('failed to get list. Error:' + args.get_message());
}

I hope this will be helpful to get a list item by id using jsom (JavaScript object model) in SharePoint Online/2016/2013.

In this SharePoint tutorial, we discussed crud operation on list items using jsom in sharepoint 2013 or SharePoint Online.

  • Add item to sharepoint list using javascript object model (jsom)
  • Update SharePoint List Item using JavaScript object model (JSOM)
  • Get SharePoint list items using JavaScript object model (JSOM)
  • Retrieve SharePoint list items and display in hyperlink using jsom
  • Display SharePoint List Items in Div using JSOM
  • Get SharePoint list item by id using jsom (JavaScript object model)
>