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:

retrieve sharepoint list items programmatically
Retrieve sharepoint list items programmatically

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:

sharepoint 2013 jsom get list items
SharePoint 2013 jsom get list items

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.

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

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.

retrieve list items using csom sharepoint online
Retrieve list items using csom sharepoint online

You may like following SharePoint programming tutorials:

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.

>