Tengo un objeto de JavaScript en el que intento representarlo como una tabla, aunque no puedo averiguar cómo acceder a cada matriz individual.
Aquí hay una muestra del objeto (defLogTable):
{ "headings": [ "Item", "Equip Tag", "Ref#", "Description", "Corrective Action Taken or Date Completed" ], "values": [ [ 1, "RTU-1", 1, "This did not work", "Make it Work" ], [ 2, "EF-1", 2, "This also didn't work", "Make this one work too" ] ] }Cada matriz de 'valores' corresponde a una fila en la tabla.
Y lo que he probado:
<table className="def-tbl"> <tbody> {console.log(defLogTable)} {defLogTable.headings.map(heading => ( <th>{heading}</th> ))} </tbody> </table>Error: TypeError: no se pueden leer las propiedades de undefined (leyendo 'encabezados')
¡Cualquier ayuda es apreciada!
Utilice un map anidado para representar cada fila en la propiedad de values .
<table className="def-tbl"> <thead> <tr> {defLogTable.headings.map(heading => ( <th>{heading}</th> ))} </tr> </thead> <tbody> {defLogTable.values.map(row => ( <tr> {row.map(cell => ( <td>{cell}</td> ))} </tr> ))} </tbody> </table>