Get SharePoint list items programmatically using jsom, rest api and csom

In this SharePoint client-side object model tutorial, I am going to explain how to retrieve SharePoint list items programmatically using jsom (javascript object model), Rest API, and CSOM (C#.Net managed client object model) in SharePoint Online.

Here, I have a SharePoint Online list named as “Industries,” which has a Title column and has few items inserted into the list, which looks like below:

Here, I will show you how you can retrieve SharePoint list items programmatically using csom, jsom, and rest api and display them as hyperlinks inside a Script editor web part in a SharePoint web part page.

Table of Contents

Get SharePoint List Items using JavaScript

Now we will see how to get list items using jsom (JavaScript object model) in SharePoint 2013/2016/2019 or SharePoint Online.

Below is code you can add inside a script editor web part.

<p style="font-size:25px;" width="500px;">Industries (JSOM):</p>
<hr>
<p id="industries" style="font-size:15px;" width="500px;"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(getIndustriesJSOM, "sp.js");
});
var colltaskListItem;
function getIndustriesJSOM()
{
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Industries');
var camlQuery = new SP.CamlQuery();
colltaskListItem = oList.getItems(camlQuery);
clientContext.load(colltaskListItem);
clientContext.executeQueryAsync(onSuccess, onFailure);
}
function onSuccess()
{
var allIndustries='';
var listItemEnumerator = colltaskListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var url=_spPageContextInfo.webAbsoluteUrl +"/Lists/Industries/DispForm.aspx?ID="+oListItem.get_item('ID');
allIndustries+= "<a href='" + url + "'>" + oListItem.get_item('Title') + "</a>" + "<br />";
}
$("#industries").html(allIndustries);
}
function onFailure()
{
alert('Some error occurred');
}
</script>

Once you run the jsom SharePoint code, you can see it will display the list items like below:

Get SharePoint list items using rest api

Now I will show you how to get sharepoint list items using rest api in SharePoint 2013/2016 or SharePoint Online. We will retrieve items from the same SharePoint online list.

Below SharePoint rest api code, you can insert inside a script editor web part in SharePoint Online web part page.

<p style="font-size:25px;" width="500px;">Industries (Rest API):</p>
<hr>
<p id="industries" style="font-size:15px;" width="500px;"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Industries')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var allitems='';
var items = data.d.results;
for (var i = 0; i < items.length; i++) {
var url=_spPageContextInfo.webAbsoluteUrl +"/Lists/Industries/DispForm.aspx?ID="+items[i].ID;
allitems+= "<a href='" + url + "'>" + items[i].Title + "</a>" + "<br>";
}
document.getElementById("industries").innerHTML = allitems;
}
function onError(error) {
alert(JSON.stringify(error));
}
</script>

Once you run the code, it will retrieve sharepoint list items programmatically using jsom in SharePoint online and display in a hyperlink.

get sharepoint list items using rest api — get SharePoint list items using rest API

Get SharePoint list items using CSOM

Now we will see how we can retrieve list items using csom SharePoint online or SharePoint 2016/2013. Here I have created an asp.net web application and used c#.net managed object model code by using below dlls:

Microsoft.SharePoint.Client.dll
Microsoft.SharePoint.Client.Runtime.dll

You can create an Asp.net web application, windows or console application, or you can use Provider hosted Add-in SharePoint Online to work with C#.Net managed object model code.

Here, I have used a Literal asp.net control to display all list items as a hyperlink.

.Aspx Code:

<div class="jumbotron">
<h2>SharePoint .Net Client Object Model (csom)</h2>
</div>
<div class="row">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>

.cs Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.Client;
using ListItem = Microsoft.SharePoint.Client.ListItem;
using ListItemCollection = Microsoft.SharePoint.Client.ListItemCollection;
namespace ClientDemoSharePointOnline
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindListItems();
}
}
void BindListItems()
{
using (ClientContext ctx = new ClientContext("https://onlysharepoint2013.sharepoint.com/sites/Rohit/"))
{
ctx.AuthenticationMode = ClientAuthenticationMode.Default;
ctx.Credentials = new SharePointOnlineCredentials("bijay@onlysharepoint2013.onmicrosoft.com", GetSPOSecureStringPassword());
List lstIndustries = ctx.Web.Lists.GetByTitle("Industries");
CamlQuery query = CamlQuery.CreateAllItemsQuery(100);
ListItemCollection items = lstIndustries.GetItems(query);
ctx.Load(items);
ctx.ExecuteQuery();
string fullItems = string.Empty;
foreach (ListItem listItem in items)
{
string url= "https://onlysharepoint2013.sharepoint.com/sites/Rohit/Lists/Industries/" + listItem["ID"].ToString();
fullItems += "<a href='" + url + "'>" + listItem["Title"].ToString() + "</a>" + "<br>";
}
Literal1.Text = fullItems;
}
}
private static SecureString GetSPOSecureStringPassword()
{
try
{
var secureString = new SecureString();
foreach (char c in "GiveYourPasswordHere")
{
secureString.AppendChar(c);
}
return secureString;
}
catch
{
throw;
}
}
}
}

Once you run the code, you can see it will get SharePoint list items programmatically using csom in SharePoint.

retrieve list items using csom sharepoint online

Conclusion

In this SharePoint client object model tutorial, we discussed retrieving SharePoint list items programmatically using the JavaScript object model (jsom), getting all SharePoint items using Rest API, and getting list items using csom SharePoint online.