I'm trying to use javascript to convert this JSON data into HTML table.
This is my code so far; however, I am confused about how to process the 'contacts' part and put them into a cell like this: first_name + last_name + position of the CEO and CTO.
I was thinking of using pany_info[i]["contacts"].forEach(function(e){} to extract the contacts data but I am not sure how to put it together in the cell.
Any help appreciated!
My code:
function CreateTableFromJSON() {
var pany_info = [{
"id": 1,
"pany_name": "ACompany",
"established": 1999,
"industry": "Tech",
"contacts": [{
"first_name": "AAFirst",
"last_name": "AALast",
"position": "CEO"
},
{
"first_name": "ABFirst",
"last_name": "ABLast",
"position": "CTO"
}
]
},
{
"id": 2,
"pany_name": "BCompany",
"established": 1998,
"industry": "Med",
"contacts": [{
"first_name": "BAFirst",
"last_name": "BALast",
"position": "CEO"
},
{
"first_name": "BBFirst",
"last_name": "BBLast",
"position": "CTO"
}
]
},
{
"id": 3,
"pany_name": "CCompany",
"established": 1997,
"industry": "Ivest",
"contacts": [{
"first_name": "CAFirst",
"last_name": "CALast",
"position": "CEO"
},
{
"first_name": "CBFirst",
"last_name": "CBLast",
"position": "CTO"
}
]
},
{
"id": 4,
"pany_name": "DCompany",
"established": 1996,
"industry": "Tech",
"contacts": [{
"first_name": "DAFirst",
"last_name": "DALast",
"position": "CEO"
},
{
"first_name": "DBFirst",
"last_name": "DBLast",
"position": "CTO"
}
]
},
{
"id": 5,
"pany_name": "ECompany",
"established": 1995,
"industry": "Med",
"contacts": [{
"first_name": "EAFirst",
"last_name": "EALast",
"position": "CEO"
},
{
"first_name": "EBFirst",
"last_name": "EBLast",
"position": "CTO"
}
]
}
]
// EXTRACT VALUE FOR HTML HEADER.
// ('ID', 'Company Name', 'Established','Industry', 'Contacts')
var col = [];
for (var i = 0; i < pany_info.length; i++) {
for (var key in pany_info[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
//Create a table
var table = document.createElement("table");
//Create table rows
var tr = table.insertRow(-1);
//Create table headers
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
//Add JSON data to table as rows
for (var i = 0; i < pany_info.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = pany_info[i][col[j]];
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
table, th, td
{
margin:10px 0;
border:solid 1px #333;
padding:2px 4px;
font:15px Verdana;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<div id="showData"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I'm trying to use javascript to convert this JSON data into HTML table.
This is my code so far; however, I am confused about how to process the 'contacts' part and put them into a cell like this: first_name + last_name + position of the CEO and CTO.
I was thinking of using pany_info[i]["contacts"].forEach(function(e){} to extract the contacts data but I am not sure how to put it together in the cell.
Any help appreciated!
My code:
function CreateTableFromJSON() {
var pany_info = [{
"id": 1,
"pany_name": "ACompany",
"established": 1999,
"industry": "Tech",
"contacts": [{
"first_name": "AAFirst",
"last_name": "AALast",
"position": "CEO"
},
{
"first_name": "ABFirst",
"last_name": "ABLast",
"position": "CTO"
}
]
},
{
"id": 2,
"pany_name": "BCompany",
"established": 1998,
"industry": "Med",
"contacts": [{
"first_name": "BAFirst",
"last_name": "BALast",
"position": "CEO"
},
{
"first_name": "BBFirst",
"last_name": "BBLast",
"position": "CTO"
}
]
},
{
"id": 3,
"pany_name": "CCompany",
"established": 1997,
"industry": "Ivest",
"contacts": [{
"first_name": "CAFirst",
"last_name": "CALast",
"position": "CEO"
},
{
"first_name": "CBFirst",
"last_name": "CBLast",
"position": "CTO"
}
]
},
{
"id": 4,
"pany_name": "DCompany",
"established": 1996,
"industry": "Tech",
"contacts": [{
"first_name": "DAFirst",
"last_name": "DALast",
"position": "CEO"
},
{
"first_name": "DBFirst",
"last_name": "DBLast",
"position": "CTO"
}
]
},
{
"id": 5,
"pany_name": "ECompany",
"established": 1995,
"industry": "Med",
"contacts": [{
"first_name": "EAFirst",
"last_name": "EALast",
"position": "CEO"
},
{
"first_name": "EBFirst",
"last_name": "EBLast",
"position": "CTO"
}
]
}
]
// EXTRACT VALUE FOR HTML HEADER.
// ('ID', 'Company Name', 'Established','Industry', 'Contacts')
var col = [];
for (var i = 0; i < pany_info.length; i++) {
for (var key in pany_info[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
//Create a table
var table = document.createElement("table");
//Create table rows
var tr = table.insertRow(-1);
//Create table headers
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
//Add JSON data to table as rows
for (var i = 0; i < pany_info.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = pany_info[i][col[j]];
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}<html>
<head>
<title>Convert JSON Data to HTML Table</title>
<style>
table, th, td
{
margin:10px 0;
border:solid 1px #333;
padding:2px 4px;
font:15px Verdana;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<div id="showData"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
- you only show one column for 'Contacts', yet you have two contacts in the data. Seems to me you should have two columns "CEO" and "CTO", then in each, put the name. – Apps-n-Add-Ons Commented Dec 20, 2017 at 22:54
- I'm not sure if i should do that or do this: for example, firstname lastname - CEO, firstname lastname - CTO all in each cell – ChuChu Commented Dec 20, 2017 at 23:04
- Until you know what it will look like on the end result, you can't really get much help (sort of like building a building - if you aren't sure if you want windows in it or not, how can your contractor know what to order..... – Apps-n-Add-Ons Commented Dec 20, 2017 at 23:11
2 Answers
Reset to default 6As I understood, You want to put contacts array in the cell. We know that contacts column is 4 in nested for loop. You can write a simple if validation to check what the current j is. If j is not 4 which is contacts column, insert value in the table. If the current j value is 4, then make one more nested for loop which will loop contacts array in each object.
var pany_info = [{
"id": 1,
"pany_name": "ACompany",
"established": 1999,
"industry": "Tech",
"contacts": [{
"first_name": "AAFirst",
"last_name": "AALast",
"position": "CEO"
}, {
"first_name": "ABFirst",
"last_name": "ABLast",
"position": "CTO"
}]
}, {
"id": 2,
"pany_name": "BCompany",
"established": 1998,
"industry": "Med",
"contacts": [{
"first_name": "BAFirst",
"last_name": "BALast",
"position": "CEO"
}, {
"first_name": "BBFirst",
"last_name": "BBLast",
"position": "CTO"
}]
}, {
"id": 3,
"pany_name": "CCompany",
"established": 1997,
"industry": "Ivest",
"contacts": [{
"first_name": "CAFirst",
"last_name": "CALast",
"position": "CEO"
}, {
"first_name": "CBFirst",
"last_name": "CBLast",
"position": "CTO"
}]
}, {
"id": 4,
"pany_name": "DCompany",
"established": 1996,
"industry": "Tech",
"contacts": [{
"first_name": "DAFirst",
"last_name": "DALast",
"position": "CEO"
}, {
"first_name": "DBFirst",
"last_name": "DBLast",
"position": "CTO"
}]
}, {
"id": 5,
"pany_name": "ECompany",
"established": 1995,
"industry": "Med",
"contacts": [{
"first_name": "EAFirst",
"last_name": "EALast",
"position": "CEO"
}, {
"first_name": "EBFirst",
"last_name": "EBLast",
"position": "CTO"
}]
}]
// EXTRACT VALUE FOR HTML HEADER.
// ('ID', 'Company Name', 'Established','Industry', 'Contacts')
var col = [];
for (var i = 0; i < pany_info.length; i++) {
for (var key in pany_info[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
//Create a table
var table = document.createElement("table");
//Create table rows
var tr = table.insertRow(-1);
//Create table headers
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
//Add JSON data to table as rows
for (var i = 0; i < pany_info.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
if (j !== 4) {
tabCell.appendChild(document.createTextNode(pany_info[i][col[j]]));
} else {
for (var x = 0; x < pany_info[i].contacts.length; x++) {
var firstName = pany_info[i].contacts[x].first_name,
lastName = pany_info[i].contacts[x].last_name,
position = pany_info[i].contacts[x].position;
tabCell.appendChild(document.createTextNode(" " + firstName + " " + lastName + ", " + position));
}
}
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);<div id="showData">
</div>Let me know if this is what you want. If not, I will edit the answer.
I think the best approach is to add the contacts as divs or as ul/lis inside the contacts cell (in my approach down bellow, I used divs).
I also used array functions forEach to iterate the arrays, which can easily convert them to simple for loops if you want:
function CreateTableFromJSON(array) {
var table = document.createElement("table"); // the table elements
var col = Object.keys(array[0]); // the columns names (I think taking the keys of the first object will suffice)
// HEADER:
var tr = table.insertRow(-1); // the header row
col.forEach(function(key) { // for each key in col
var th = document.createElement("th"); // create a header cell
th.textContent = key; // use textContent instead of innerHTML (it's better)
tr.appendChild(th);
});
// ROWS:
array.forEach(function(obj) { // for each object obj in pany_info
var tr = table.insertRow(-1); // create a row for it
col.forEach(function(key) { // and for each key in col
var tabCell = tr.insertCell(-1); // create a cell
if (Array.isArray(obj[key])) { // if the current value is an array, then
obj[key].forEach(function(contact) { // for each entry in that array
var div = document.createElement("div"); // create a div and fill it
div.textContent = contact.first_name + " " + contact.last_name + ", " + contact.position;
tabCell.appendChild(div); // then add the div to the current cell
});
} else { // otherwise, if the value is not an array (it's a string)
tabCell.textContent = obj[key]; // add it as text
}
});
});
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
var pany_info = [{"id":1,"pany_name":"ACompany","established":1999,"industry":"Tech","contacts":[{"first_name":"AAFirst","last_name":"AALast","position":"CEO"},{"first_name":"ABFirst","last_name":"ABLast","position":"CTO"}]},{"id":2,"pany_name":"BCompany","established":1998,"industry":"Med","contacts":[{"first_name":"BAFirst","last_name":"BALast","position":"CEO"},{"first_name":"BBFirst","last_name":"BBLast","position":"CTO"}]},{"id":3,"pany_name":"CCompany","established":1997,"industry":"Ivest","contacts":[{"first_name":"CAFirst","last_name":"CALast","position":"CEO"},{"first_name":"CBFirst","last_name":"CBLast","position":"CTO"}]},{"id":4,"pany_name":"DCompany","established":1996,"industry":"Tech","contacts":[{"first_name":"DAFirst","last_name":"DALast","position":"CEO"},{"first_name":"DBFirst","last_name":"DBLast","position":"CTO"}]},{"id":5,"pany_name":"ECompany","established":1995,"industry":"Med","contacts":[{"first_name":"EAFirst","last_name":"EALast","position":"CEO"},{"first_name":"EBFirst","last_name":"EBLast","position":"CTO"}]}];
CreateTableFromJSON(pany_info);table { border-collapse: collapse; }
td, th { border: 1px solid black; }
tr { background: #ccc; }
tr:nth-child(odd) { background: #eee; }
td > div { white-space: pre; }<div id="showData"></div>