Display data in tabular format using JavaScript client object model in SharePoint Online

Display data in tabular format using JavaScript client object model in SharePoint Online

Here we will discuss how we can display data in a tabular format using JavaScript client object model in SharePoint Online site. I have a SharePoint list which has a structure like below:

Display data in tabular format using JavaScript client object model in SharePoint Online
Display data in tabular format using JavaScript client object model in SharePoint Online

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

Also read:

BeforeProperties and AfterProperties in Event Receiver in SharePoint 2013

<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(‘Title’);
}
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 using JavaScript client object model in Office365
Display data in tabular format using JavaScript client object model in Office365


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 →