Display data in tabular format using JavaScript client object model (jsom) in SharePoint Online/2013/2016

This JSOM SharePoint tutorial, we will discuss, how to display SharePoint list data in a tabular format using the JavaScript client object model (jsom) in SharePoint Online/2013/2016 site.

Here I have a SharePoint list which has two columns:

  • Title
  • Count

The SharePoint list looks like below:

Display data in tabular format in SharePoint using JavaScript

Display data in tabular format using JavaScript in SharePoint

Then I have created a new SharePoint web part page and then added a script editor web part into the page. You can paste the below code and then save the SharePoint web part page.

<table>
<tr>
<td height="60" width="200px" bgcolor="#819FF7"><label id="lblTotalDocuments"></label>
<br/>
Total Documents
</td>
<td height="60" width="200px" bgcolor="#FF5733"><label id="lblUnderReview"></label>
<br/>
Under Review
</td>
<td height="60" width="200px" bgcolor="#BE81F7"><label id="lblTotalPublished"></label>
<br/>
Total Published
</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(retrieveListItemsInclude,'sp.js');
function retrieveListItemsInclude()
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle('MyChartList');
var query = SP.CamlQuery.createAllItemsQuery();
var allItems = list.getItems(query);
context.load(allItems, 'Include(Title, Id, Count)');
context.executeQueryAsync(Function.createDelegate(this, function () { onQuerySuccess(allItems); }),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySuccess(allItems) {
var ListEnumerator = allItems.getEnumerator();
while (ListEnumerator.moveNext()) {
var currentItem = ListEnumerator.get_current();
if(currentItem.get_item('ID')=="1")
{
alert(currentItem.get_item('ID')=="1");
document.getElementById('lblTotalDocuments').innerHTML =currentItem.get_item('Count');
}
if(currentItem.get_item('ID')=="2")
{
alert('Hello');
document.getElementById('lblUnderReview').innerHTML =currentItem.get_item('Title');
}
if(currentItem.get_item('ID')=="3")
{
document.getElementById('lblTotalPublished').innerHTML =currentItem.get_item('Title');
}

}
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Then the result will appear like below:

Display data in tabular format in sharepoint using javascript

You may like following jsom SharePoint tutorials:

This SharePoint tutorial, we learned, how to display data in tabular format using JavaScript client object model (jsom) in SharePoint Online/2013/2016

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Nice article Bijay. I guess when binding to label, it should be –
    document.getElementById(‘lblTotalDocuments’).innerHTML =currentItem.get_item(‘Count’);

  • >