Me gustaría insertar datos JSON analizados en una tabla HTML a través de Javascript. Creo que estoy cerca de una solución, pero no puedo descifrar el paso final.

Objetivo: necesito insertar el nombre, la edad, la identidad secreta y los poderes de tres superhéroes en sus respectivas columnas en una tabla. Los datos provienen de un archivo JSON. Lo analicé y está listo para usar en Javascript. Quiero recorrer los objetos dentro de los datos e insertar los datos correctos en las celdas. No tengo permitido usar jQuery o técnicas similares.

Problema: el problema es que parece que no puedo recorrer los objetos (nombre, edad, etc.) para cada superhéroe y agregarlo a la celda. ¿Cómo apunto/hago referencia a los objetos para usarlos en un bucle? Por ejemplo, esto 'funciona', pero da un resultado incorrecto ya que no quiero recorrer los nombres:

Código JavaScript:

 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); }

En cambio, quiero recorrer el objeto de esta manera, de manera horizontal.

Solución esperada: espero que la solución se vea así, pero no funciona:

 for(x = 0; x < 4; x++) { let newCell = newRow.insertCell(0); let newText = document.createTextNode(members[i].obj[x]); newCell.appendChild(newText);

datos JSON:

 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' ] } ] } //, {} ]

¿Hay alguien que pueda ayudar? ¡Gracias por adelantado!