Reputation: 71
I am trying to make a table from json objects, actually i have JSON objects in large quantity. But first i am trying to create tabe for few JSON objects, if this will go right , i willl implement this method later on.
This is what i tried so Far.
var attributes =
[
{
"name": "Asset #",
"display_name": "Asset #",
"key": "header2",
"values": {
"MSSBL": "4-194169767930##1-2H77NZSQ",
"SNOW": "4-194169767930##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
},
{
"name": "Serial Number",
"display_name": "Serial Number",
"key": "header3",
"values": {
"MSSBL": "21256112##1-2H77NZSQ",
"SNOW": "NA##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
},
{
"name": "ACCOUNT NUMBER",
"display_name": "ACCOUNT NUMBER",
"key": "header6",
"values": { "MSSBL": "532649##1-2H77NZSQ",
"SNOW": "NA##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
}
]
var key = [];
document.write("<table border==\"1\"><tr>");
for (key in attributes[0]) {
document.write('<td>' + '<b>' + key + '</b>' + '</td>');
}
document.write("</tr>");
for (var i = 0; i < attributes.length; i++) {
document.write('<tr>');
for (key in attributes[i]) {
document.write('<td>' + attributes[i][key] + '</td>');
}
document.write('</tr>');
}
document.write("</table>");
Actually i am facing a issue when, i am trying to add Values inside the table if I remove values then the table is visible in output otherwise no output '
"values": {
"MSSBL": "4-194169767930##1-2H77NZSQ",
"SNOW": "4-194169767930##1-2H77NZSQ"},
Upvotes: 0
Views: 106
Reputation: 1
Your trouble came from this loop:
for (var j = 0; j < col.length; j++) {
// ...
}
You can check when col[j]
is values
to get MSSBL
or SNOW
value:
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
if (col[j] === 'values') {
var item = attributes[i][col[j]];
console.log('MSSBL:', item.MSSBL);
console.log('SNOW:', item.SNOW);
// try to append MSSBL value:
tabCell.innerHTML = item.MSSBL;
} else {
// other properties
tabCell.innerHTML = attributes[i][col[j]];
}
}
Update: In your updated code, you can edit it inside the loop:
for (key in attributes[i]) {
if (key === 'values') {
document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
} else {
document.write('<td>' + attributes[i][key] + '</td>');
}
}
var attributes =
[
{
"name": "Asset #",
"display_name": "Asset #",
"key": "header2",
"values": {
"MSSBL": "4-194169767930##1-2H77NZSQ",
"SNOW": "4-194169767930##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
},
{
"name": "Serial Number",
"display_name": "Serial Number",
"key": "header3",
"values": {
"MSSBL": "21256112##1-2H77NZSQ",
"SNOW": "NA##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
},
{
"name": "ACCOUNT NUMBER",
"display_name": "ACCOUNT NUMBER",
"key": "header6",
"values": { "MSSBL": "532649##1-2H77NZSQ",
"SNOW": "NA##1-2H77NZSQ"},
"type": "header",
"data_type": "Text",
"editable": "N"
}
]
var key = [];
document.write("<table border==\"1\"><tr>");
for (key in attributes[0]) {
document.write('<td>' + '<b>' + key + '</b>' + '</td>');
}
document.write("</tr>");
for (var i = 0; i < attributes.length; i++) {
document.write('<tr>');
for (key in attributes[i]) {
if (key === 'values') {
document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
} else {
document.write('<td>' + attributes[i][key] + '</td>');
}
}
document.write('</tr>');
}
document.write("</table>");
Upvotes: 1
Reputation: 4015
attributes[i]["values"]
is object
You should iterate again through attributes[i]["values"]
. Add one condition:
if(typeof attributes[i][col[j]]==='object') //then iterate again
Upvotes: 2
Reputation: 289
Have a look at this: https://github.com/MubashirEbad/Library-Management-System/blob/fd73fc6f1fa483c376f395f6df6a2b1129a7897f/index.html#L11 It currently only maps the table data rows. You need to run another loop for the headers in table.
Upvotes: 0