How to display SharePoint list data in an HTML table using JavaScript?

This JSOM SharePoint example explains how to display SharePoint list data in an HTML table using JavaScript. We will use the JSOM code to display SharePoint list items in the HTML table.

Here we will discuss how to display SharePoint list data in an HTML table in a tabular format using jsom and jQuery in SharePoint.

We will also see how to retrieve list items using JavaScript SharePoint Online using SharePoint hosted apps or add-ins.

Table of Contents

Display SharePoint list data in an HTML table using JavaScript

I have a SharePoint list that has a few columns like the one below:

User Name (single line text )
Password(single line text)
Address (Multiline textbox)
Gender (Choice)
Country (Choice / Dropdown list)
Submission Date (Date and Time)

The SharePoint list has some items shown below screenshot:

display sharepoint list data in html table using javascript

Now, we have to display these SharePoint List items in a tabular format using HTML and JavaScript (jsom).

In SharePoint, you can use the jsom code inside a content editor web part or a script editor web part.

First, I will show you how can we use the code inside a SharePoint content editor web part. In the same way, you can use the code inside the script editor web part.

Here, we will create an HTML file, JS file, and CSS file.

HTML File

The HTML code to display SharePoint list items using JavaScript looks like this:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytable.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Mytablestyle.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="ptitle"></p>
</body>
</html>

In this HTML Code, I have given the JS path link as well as the CSS path link. Then, add a paragraph tag <P> with the ID attribute. Here I have given (id=”ptitle”).

JavaScript (.js) file for get list items using javascript SharePoint 2013/Online

Below is the code that contains the JSOM (JavaScript object model) code to retrieve and display SharePoint list items in an HTML table using JavaScript.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var siteUrl = _spPageContextInfo.siteServerRelativeUrl;
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('CmpanyInfoList');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
var mytable = "<table class=\"alternate\"><tr>" +
"<th>Title</th>" +
"<th>Address</th>" +
"<th>Gender</th>" +
"<th>Country</th>" +
"<th>EmailID</th>" +
"<th>SubmissionDate</th></tr>";
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
mytable += "<tr><td>" + oListItem.get_item('Title') + "</td><td>" + oListItem.get_item('Address') + "</td><td>" + oListItem.get_item('Gender') + "</td><td>" + oListItem.get_item('Country') + "</td><td>" + oListItem.get_item('EmailID') + "</td><td>" + oListItem.get_item('SubmissionDate') + "</td></tr>";}
mytable += "</table>";
$("#ptitle").html(mytable);
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here in this js code, I have created the table dynamically, and in the last, I have bound the variable with the ID by using the below code-

$("#ptitle").html(mytable);

.CSS File

Here, I have added the .css file to add some styling to the HTML table.

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}

Then upload these three files(Mytable.html File, Mytable.JS File, Mytablestyle.CSS File) in the “Site Assets” document library in SharePoint.

Then, create a web part page Edit the page and click on Add a web part link; then, it will open the Web part categories in the ribbon. From the web part categories, select Media and Content, and then from the Parts, select Content Editor web part.

By clicking on the “Edit web part“, we can give the HTML File path in the content editor web part. Once you save the page, the HTML file will be displayed on that Web Part Page like the below:-

display sharepoint list data in jquery data table

This is how to display SharePoint list data in an HTML table using javascript.

Display SharePoint list items in HTML table using SharePoint Hosted Apps

Now, we will see another example of how to display SharePoint list items using JavaScript in SharePoint-hosted apps or add-ins.

The example is about how to display SharePoint list items in an HTML table using jQuery and jsom in SharePoint Online.

Here I have a SharePoint Online list which looks like below:

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App

Next, Open your Visual Studio and create a SharePoint Add-In. To create this, go to the File menu, click on the new item, and next click on the Project item. It displays a new project.

Here, in the left side panel, go to the Office/SharePoint tab, here, you select Add-in.

Now it displays the list of add-ins, here, you select SharePoint Add-In. Now, enter your project name and location. Then click on OK.

Next, it will display the new SharePoint Add-In window. Here, select your SharePoint host URL (Choose your SharePoint developer site URL), select SharePoint Hosted, and click Next. Now, it will ask for your Microsoft Account details. Enter your username and password and click on sign-in.

Here, you select SharePoint Online as shown below and click on Finish.

Go to the aspx page. Add this code to this page.

<asp:ContentContentPlaceHolderID="PlaceHolderMain"runat="server">
<divid="empdata">
<%–<p id="message">
<!– The following content will be replaced with the user name when you run the app – see App.js –>
initializing…
</p>–%>
</div>
</asp:Content>

Here, just add id=”empdate” in div tag because for displaying, we bind data to this tag.

'use strict';

ExecuteOrDelayUntilScriptLoaded(RetrieveList, "sp.js");

var listItems;
functionRetrieveList() {
var hostUrl = decodeURIComponent(getURLParameters("SPHostUrl"));
var clientContext = newSP.ClientContext.get_current();
var hostcontext = newSP.AppContextSite(clientContext, hostUrl);
var web = hostcontext.get_web();
var list = web.get_lists().getByTitle(‘Employee’);
var cmlquery = newSP.CamlQuery();
listItems = list.getItems(cmlquery);
load(listItems);
executeQueryAsync(onQuerySucceeded, onQueryFailed);
}

functiononQuerySucceeded() {
var listItemEnumerator = listItems.getEnumerator();
var displaytable = "<table border=\"1\"><tr>" +
"<th>Title</th>" +
"<th>Country</th>" +
"<th>State</th></tr>";

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
displaytable += "<tr><td>" + oListItem.get_item(‘Title’) + "</td><td>"
+ oListItem.get_item(‘Country’).get_lookupValue() + "</td><td>"
+ oListItem.get_item(‘State’).get_lookupValue() + "</td></tr>";
}
displaytable += "</table>"
$("#empdata").html(displaytable)
}

functiononQueryFailed(sender, args) {
alert(‘Error: ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

functiongetURLParameters(param) {
var params = document.URL.split(‘?’)[1].split(‘&’);
var strParams = ";
for (vari = 0; i<params.length; i = i + 1) {
var singleParam = params[i].split(‘=’);
if (singleParam[0] == param) {
returnsingleParam[1];
}
}
}

Go to appmanifest.xml file and open it. Then go to the permission here, and you select scope: site collection and permission: Full Control.

Display SharePoint List items in HTML Table using JSOM in SharePoint Hosted App

Go to your solution explorer, select your project name, right-click on it, and click on the deploy option.

Here is your output.

This is how we can get list items using JavaScript SharePoint 2013 and display SharePoint list items in html table in SharePoint-hosted apps or add-ins.

Conclusion

In this SharePoint JSOM tutorial, we discussed how to display the List Item in a tabular format in SharePoint Online by using JSOM (JavaScript Object Model). We saw how to display list data in tabular format using jsom in SharePoint using script editor web part or content editor web part and in SharePoint hosted apps or add-ins.