How to retrieve SharePoint list items and display in hyperlink using jsom

by
Complete SharePoint Training Course ($46 OFF)

This SharePoint JSOM tutorial we will discuss how to retrieve SharePoint list items and display in the hyperlink using JSOM (JavaScript Object Model).

Retrieve SharePoint list items and display in hyperlink using jsom

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

  • Title
  • Modified
Retrieve List Item in Hyperlink using JSOM in SharePoint Online
Retrieve List Item in Hyperlink using JSOM in SharePoint Online

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

Read some SharePoint jsom tutorials:

Conclusion

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

>