Retrieve list items from SharePoint list using JavaScript Object Model in SharePoint Online


Here we will discuss how we can retrieve list items from SharePoint list using JavaScript object model in SharePoint Online Office 365 sites. The same code also works for SharePoint 2016 as well as SharePoint 2013.


In this particular example, I have a SharePoint online list which has columns like:
Title
FirstName
LastName

Also, you can check my posts on:
How to check for error in Microsoft Flow in Office 365?

SharePoint Online Develop SharePoint Hosted Add-in using Visual Studio 2015 Demo

And in that list, there were few records inside it. The out of box list looks like below:

Retrieve list items using jsom sharepoint 2013
Retrieve list items using jsom SharePoint 2013

Here we will show try to retrieve this list data by using jsom.

Here let us put our jsom code inside a script editor web part which we will add inside a web part page.

Below is the full code:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<div id=”divListItems”></div>

<script>

$(function () {

ExecuteOrDelayUntilScriptLoaded(retrieveListItems, “sp.js”);

});

function retrieveListItems() {

var clientContext = new SP.ClientContext();

var oList = clientContext.get_web().get_lists().getByTitle(‘Employees’);

var camlQuery = new SP.CamlQuery();

this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded(sender, args) {

var listItemInfo = ”;

var listItemEnumerator = collListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();

listItemInfo += ‘<strong>ID: </strong> ‘ + oListItem.get_id() +

‘ <strong>Title:</strong> ‘ + oListItem.get_item(‘Title’) +

‘ <strong>FirstName:</strong> ‘ + oListItem.get_item(‘FirstName’) +

‘ <strong>LastName:</strong> ‘ + oListItem.get_item(‘LastName’) +

‘<br />’;

}

$(“#divListItems”).html(listItemInfo);

}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

If you save the code and refresh the page you can see the list items like below:

SharePoint 2013 retrieve list items using jsom
SharePoint 2013 retrieve list items using jsom

Here we have passed an empty caml query.

var camlQuery = new SP.CamlQuery();

this.collListItem = oList.getItems(camlQuery);

But if you want to retrieve items based on certain filter conditions then you can write the CAML query and can pass it like below:

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(

‘<View><Query><Where><Geq><FieldRef Name=\’ID\’/>’ +

‘<Value Type=\’Number\’>2</Value></Geq></Where></Query>’ +

‘<RowLimit>10</RowLimit></View>’

);

this.collListItem = oList.getItems(camlQuery);

The above query will return results where the ID value greater than or equal to 2.



Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →