This JSOM SharePoint 2013 example explains, how to display SharePoint list data in HTML table using JavaScript. We will use the JSOM code to display SharePoint list items in 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 Online or SharePoint 2013/2016.
We will also, see how to retrieve list items using JavaScript SharePoint Online using SharePoint hosted apps or add-ins.
Display SharePoint list data in an HTML table using JavaScript
I have a SharePoint list which has few columns like 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 like shown in the below screenshot-

Now we have to display these SharePoint List items, in a tabular format using HTML and JavaScript (jsom).
In SharePoint Online or SharePoint 2013/2010, you can use the jsom code inside a content editor web part or a script editor web part.
First will show you how can we use the code inside a SharePoint content editor web part. 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 below:
<!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 and as well as the CSS path link. Then add a paragraph tag <P> with ID attribute. Here i have given (id=”ptitle”).
JavaScript (.js) file for get list items using javascript SharePoint 2013/Online
Below is the code which 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 binded the variable with the ID by using below code-
$("#ptitle").html(mytable);
.CSS File
Here, I have added the .css file to add some styling into 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 Online/2013/2016.
Then create a web part page and Edit the page and then 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 screenshot-

This is how we can display SharePoint list data in HTML table using javascript. The same code we can use to display SharePoint list in HTML page in SharePoint 2013/2016/2019 also.
Display SharePoint list items in HTML table using SharePoint Hosted Apps
Now, we will see another example on, how to display SharePoint list items using JavaScript in a SharePoint hosted apps or add-ins.
The example is about, how to display SharePoint list items in 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, Create a SharePoint Add-In. For creating this, go to the File menu, click on the new item, next click on 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-In’s, 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) and 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 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 you select scope: site collection and permission: Full Control.

Go to your solution explorer, select your project name then right-click on it and click on deploy option.
Here is your output.

This is how we can get list items using JavaScript SharePoint 2013 and display SharePoint list item in html table in a SharePoint hosted apps or add-ins.
You may like the following JSOM tutorials:
- Uncaught ReferenceError: web is not defined Error in SharePoint Online JSOM
- How to get SharePoint person or group field using JavaScript (jsom)
- Retrieve SharePoint list items programmatically using jsom, rest api and csom
- How to create a list using jsom (JavaScript object model) in SharePoint?
- Retrieve all users from all groups using jsom in SharePoint
- Uncaught TypeError: Cannot read property ‘get_current’ of undefined error in jsom SharePoint Online
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.
I am Bijay a Microsoft MVP (8 times –Â My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com