CRUD Operations using JSOM in SharePoint

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

  • How to add an item to a 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 the SharePoint online site, which has the 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.

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 to 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 the jsom code 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, 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 fills the form and clicks 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.

Update SharePoint List Item using JavaScript

Here, I have a SharePoint list that has a few columns like the one 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 (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, we have given the ID attribute to update the control values by ID using jsom for each control.

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. 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 codes.

Then, after I set all the List item values 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, create a web part page, Edit the page, and then click on the “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 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

Here, we saw how to update a List Item by ID using JSOM in SharePoint Online.

Get SharePoint list items using JavaScript

Now, let us see 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 have 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 a js file. We have the HTML code in the HTML file, which we are adding in a content editor web part. And in the js file, we have the jsom SharePoint 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 add a content editor web part. I had given the HTML file path in the content editor, and 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.

Get SharePoint list items and display in a 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 to the SharePoint list:

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

Create HTML Input Form

I have created an HTML file in which the code looks like the one below. Here, 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 that 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 is loaded successfully.

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

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

At last, I have bound all the Items 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, Edit the page, and then click on the 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

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

Display SharePoint List Items in Div using JSOM

Now, in this crud operation using javascript in the sharepoint 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 the 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 hyperlinks and image URL fields.

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 is 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 the 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> tags 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 the styling of 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 and JS file to the Site Assets library in SharePoint.

Then, create a web part page, Edit the page, and then click on the “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 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 get a list item by id using the javascript object model (jsom) in SharePoint. By using SP.List.getItemById Method, we can get a list item by id in JavaScript in SharePoint.

We can retrieve a 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 a 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 using javascript object model (jsom)

Below is the jsom code to get a list item by id using jsom in SharePoint.

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.

This SharePoint tutorial discussed crud operation on list items using jsom in sharepoint.

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

YOu may also like the following tutorials:

>