Retrieve 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, SharePoint 2016/2013.

Here I have a SharePoint Online list name as “Industries” which has a Title column and it 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 as hyperlink inside a Script editor web part in a SharePoint web part page.

Retrieve List Items using jsom in SharePoint

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

Below 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 you can 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, you can see it will retrieve sharepoint list items programmatically using jsom in SharePoint online and display in a hyperlink.

Retrieve list items using csom SharePoint

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 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 your run the code, you can see it will get SharePoint list items programmatically using csom in SharePoint.

You may like following SharePoint programming tutorials:

• Create, Update and Delete SharePoint List using Rest API in SharePoint
• How to get SharePoint list items using JavaScript object model (JSOM)
• Retrieve all users from all groups using jsom in SharePoint
• How to create a list using jsom (JavaScript object model) in SharePoint?
• How to display SharePoint List Items in Div using JSOM (javascript object model)
• Bind SharePoint List items in dropdown list programmatically using CSOM
• Create Custom List and Fields in SharePoint Online using PnP Core CSOM Library
• Create and delete subsites under SharePoint site collection programmatically using PnP CSOM
• Create Modern Team Site and Subsite using pnp csom programmatically in SharePoint Online
• How to Display SharePoint List items using AngularJS and REST Api
• How to display dynamic contents into a page using Rest API in SharePoint Online

Conclusion

In this SharePoint client object model tutorial we discussed how to retrieve SharePoint list items programmatically using JavaScript object model (jsom), get list SharePoint items using Rest API and retrieve list items using csom SharePoint online.