0
267
ViewsHow do I loop through a nested object and subsequently add the values to HTML table cells, in Javascript?
I would like to insert parsed JSON data into a HTML table via Javascript. I think I am close to a solution, but can't figure out the final step.
Goal: I need to insert the name, age, secretIdentity and powers of three superheroes into their respective columns in a table. The data comes from a JSON file. I parsed it and it is ready to use in Javascript. I want to loop through the objects within the data and insert the correct data in the cells. I am not allowed to use jQuery or similar techniques.
Problem: The problem is that I can not seem to loop through the objects (name, age etc) for each superhero and add it to the cell. How do I target/reference the objects for use in a loop? For example, this 'works', but gives the wrong result since I don't want to loop through the names:
JavaScript code:
for(i = 0; i < members.length; i++) {
function addRow(tableID) {
let tableRef = document.getElementById(tableID);
let newRow = tableRef.insertRow(-1);
for(x = 0; x < 4; x++) {
let newCell = newRow.insertCell(0);
let newText = document.createTextNode(members[i].name);
newCell.appendChild(newText);
}
Instead, I want to loop through the object like this, in a horizontal way.
Expected solution: I expect the solution to look something like this, but it doesn't work:
for(x = 0; x < 4; x++) {
let newCell = newRow.insertCell(0);
let newText = document.createTextNode(members[i].obj[x]);
newCell.appendChild(newText);
JSON data:
const data =
[ { squadName : 'Super Hero Squad'
, homeTown : 'Metro City'
, formed : 2016
, secretBase : 'Super tower'
, active : true
, members :
[ { name : 'Molecule Man'
, age : 29
, secretIdentity : 'Dan Jukes'
, powers :
[ 'Radiation resistance'
, 'Turning tiny'
, 'Radiation blast'
] }
, { name : 'Madame Uppercut'
, age : 39
, secretIdentity : 'Jane Wilson'
, powers :
[ 'Million tonne punch'
, 'Damage resistance'
, 'Superhuman reflexes'
] } ] }
//, {}
]
Is there anyone that is able to help out? Thanks in advance!
3 answers
Answer question0
Just loop through each property of object member[i]
for (i = 0; i < members.length; i++) {
addRow('table', members[i]);
}
function addRow(tableID, member) {
let tableRef = document.getElementById(tableID);
let newRow = tableRef.insertRow(-1);
for (let prop in member) {
let newCell = newRow.insertCell(-1);
let newText = document.createTextNode(member[prop]);
newCell.appendChild(newText);
}
}
0
I'm not 100% sure about what columns you need but, I think this is close what you wanted. Hopefully you can see the general pattern to creating a DOM element, filling it with data and appending it to the table.
const data =
[ { squadName : 'Super Hero Squad'
, homeTown : 'Metro City'
, formed : 2016
, secretBase : 'Super tower'
, active : true
, members :
[ { name : 'Molecule Man'
, age : 29
, secretIdentity : 'Dan Jukes'
, powers :
[ 'Radiation resistance'
, 'Turning tiny'
, 'Radiation blast'
] }
, { name : 'Madame Uppercut'
, age : 39
, secretIdentity : 'Jane Wilson'
, powers :
[ 'Million tonne punch'
, 'Damage resistance'
, 'Superhuman reflexes'
] } ] }
//, {}
]
const table = document.getElementById('root');
data.forEach(squad => {
squad.members.forEach(hero => {
const tr = document.createElement("tr")
const nameTd = document.createElement("td")
nameTd.append(hero.name)
const ageTd = document.createElement("td")
ageTd.append(hero.age)
const secretTd = document.createElement("td")
secretTd.append(hero.secretIdentity)
const powersTd = document.createElement("td")
powersTd.append(hero.powers.join(', '))
tr.append(nameTd)
tr.append(ageTd)
tr.append(secretTd)
tr.append(powersTd)
table.append(tr)
})
})td {
border: solid black 1px;
}<table id="root">
</table>0
What you are looking for in the nested loop, the horizontal one, is "for in". "for in" will loop through the properties of an Object. Refer to this article
https://www.w3schools.com/js/js_loop_forin.asp
But, I do not recommend you to use this method - simply access key value to generate each column (<td>), because the order of keys is not guaranteed in a loop. You still have to check the key in the nested loop to make it safe.