CONVERT JSON DATA TO HTML TABLE USING JAVASCRIPT
CONVERT JSON DATA TO HTML TABLE USING JAVASCRIPT
Using vanilla js and using DOM methods
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="divcontent"></div>
</div>
<script type="text/javascript">
var jsondata = [
{
"id": 84,
"tourist_name": "Ammy",
"tourist_email": "ammy123@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-02T05:08:58.672851"
},
{
"id": 85,
"tourist_name": "shreya",
"tourist_email": "shreya.kumari4994@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:14:40.7655781"
},
{
"id": 86,
"tourist_name": "Jenny",
"tourist_email": "Jenny96@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:18:22.7652253"
},
{
"id": 87,
"tourist_name": "Apolo",
"tourist_email": "chandanjaishawal@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T12:56:51.9287121"
},
{
"id": 88,
"tourist_name": "Ajay Nagar",
"tourist_email": "aj222@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-04T08:48:53.8471058"
},
{
"id": 89,
"tourist_name": "AP",
"tourist_email": "ap.prak97@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-08T15:58:26.3844855"
},
{
"id": 90,
"tourist_name": "Alexa uodate",
"tourist_email": "alexathomas1975@gmail.com",
"tourist_location": "10281 Mission Gorge Rd, Santee, CA 92071, USA",
"createdat": "2020-06-09T14:04:12.9065286"
},
{
"id": 91,
"tourist_name": "Jennifer Mathis",
"tourist_email": "jennifermathis.89904@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-10T17:12:53.4353615"
},
{
"id": 92,
"tourist_name": "_Anand_",
"tourist_email": "ap.prak101@gmail.com",
"tourist_location": "Canada",
"createdat": "2020-06-11T05:55:13.7406625"
},
{
"id": 93,
"tourist_name": "Mark",
"tourist_email": "Mark.prak102@gmail.com",
"tourist_location": "France",
"createdat": "2020-06-11T06:07:06.939638"
}
]
var tableElement = document.createElement('table');
tableElement.classList.add("table");
tableElement.classList.add("table-striped");
var tbltr = document.createElement('tr');
var tblth = document.createElement('th');
var tbltd = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function CreateHtmlTableFromJson(JsonArray) {
var table = tableElement.cloneNode(false),
columns = CreateTableHeaders(JsonArray, table);
for (var i = 0, maxi = JsonArray.length; i < maxi; ++i) {
var tr = tbltr.cloneNode(false);
for (var j = 0, maxj = columns.length; j < maxj; ++j) {
var td = tbltd.cloneNode(false);
cellValue = JsonArray[i][columns[j]];
td.appendChild(document.createTextNode(JsonArray[i][columns[j]] || ''));
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
// In below code we are Adding header row to the html table and returns the columns.
function CreateTableHeaders(jsonarray, table) {
var columnSet = [],
tr = tbltr.cloneNode(false);
for (var i = 0, l = jsonarray.length; i < l; i++) {
for (var key in jsonarray[i]) {
if (jsonarray[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
columnSet.push(key);
var th = tblth.cloneNode(false);
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
}
}
}
table.appendChild(tr);
return columnSet;
}
var datacontainer = document.getElementById("divcontent");
datacontainer.innerHTML = "";
datacontainer.appendChild(CreateHtmlTableFromJson(jsondata));
</script>
</body>
</html>