How to Get SharePoint List Item by ID using JavaScript object model

SharePoint Online training courses

In this jsom SharePoint 2013 example, we will see how to get SharePoint list item by id using javascript object model (jsom) in SharePoint Online, SharePoint 2016, or SharePoint 2013. How we can bind list item value to various controls in SharePoint online using jsom. Let us see, SharePoint javascript get list item by id.

Get SharePoint List Item by ID using JavaScript

Here we have a custom list 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)

We will retrieve a list item by item id using the JavaScript object model (jsom) in SharePoint Online.

HTML Input Form:

Here we have created an HTML form as “UserInfoHtml File” and I have added some HTML controls like “Text Box”, “Radio button”, “Dropdown” and as well as “Date” etc.

We will bind the list item values into the HTML input controls. 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 set the item values by ID using jsom in SharePoint online.

JS Code:

Below is the js file which contains the jsom code to get list item by id in sharepoint 2013 using javascript. Here we are retrieving list item id from query string parameter.

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

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
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];
}
}
}

Here, I have used the getItemById method JavaScript code, to get the item by the list item id in SharePoint Online or SharePoint 2013/2016.

var masterListItem;
function retrieveListItems() {
var id = GetParameterValues('MyID');
getitemsbyID(id);

Create a Function with a parameter as “getitemsbyID(itemID)”. Within this function, I have created a variable “masterlist” which is having the list title as “cmpanyInfoList”.

Then within the “masterListItem” variable, I passed the ID value which is helping to get the ID. Then after I loaded that “masterListItem” which has the given below code:

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);

After loading the list item, I have retrieved all the value from List within the “onQuerySucceeded()” method. Here I retrieved the “Title” field column by using below code:

$("#usrtxt").val(masterListItem.get_item('Title'));

Similarly, We can retrieve 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-

how to retrieve list item by id using jsom in sharepoint online
sharepoint javascript get list item by id

Read some SharePoint jsom tutorials:

Conclusion

In this jsom SharePoint 2013 example, we saw how to retrieve a list item by ID using JSOM (JavaScript Object Model) in SharePoint Online. The same way we can retrieve list item by item id using javascript in SharePoint 2016/2013.

>