How to get SharePoint list items using JavaScript object model (JSOM)

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

Get SharePoint list items using JavaScript

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.

In my previous jsom SharePoint 2013 examples, we discussed how to get list item by id using jsom in SharePoint online.

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

Read some SharePoint jsom tutorials:

Conclusion

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

>