Tengo el siguiente código con la función renderHeaderCells: itero las keys del json y los agrego al header de la tabla y quiero hacer lo mismo con los values e insertar en la tabla los valores del archivo json para el body de la tabla. Estoy usando la función renderResults para iterar los valores e insertarlos en la tabla, sin embargo no sé qué está mal.
import React from "react";
const nomin = require("./nomina");
const Table = () => {
const nominImport = nomin[0];
function renderHeaderCells() {
let headerCells = [];
Object.keys(nominImport).map((x, i) => {
headerCells.push(<td key={i.name}>{x}</td>);
return headerCells;
});
return headerCells;
}
function renderResults() {
let results = [];
let res = Object.values(nominImport);
res.map((x, i) => {
if (res[i] !== undefined) {
Object.values(res[i]).map(y => {
results.push(<td>{y}</td>);
return results;
});
}
return results;
});
return results;
}
return (
<React.Fragment>
<table>
<thead>
<tr>{renderHeaderCells()}</tr>
</thead>
<tbody>
<tr>{renderResults()}</tr>
</tbody>
</table>
</React.Fragment>
);
}
export default Table;
Esta es la estructura del archivo json desde donde obtengo las keys y los values:
[
{
"ccontrato": "19613210",
"cnombre": "ACOSTA CABALLERO SIGILFREDO",
"cconcepto": "DV240",
"cactividad": "CORTE DE PALMA (1986-1991)",
"ccantidad": 1.09326819307696,
"ctotal": null,
"cccosto": 200510,
"ctotal2": null,
"cdetalle": null,
"cicontable": null,
"cfecha": "06/16/2022",
"creferencia": "912"
},
{
"ccontrato": "19613210",
"cnombre": "ACOSTA CABALLERO SIGILFREDO",
"cconcepto": "DV240",
"cactividad": "CORTE DE PALMA (1986-1991)",
"ccantidad": 1.25524285840409,
"ctotal": null,
"cccosto": 200510,
"ctotal2": null,
"cdetalle": null,
"cicontable": null,
"cfecha": "06/17/2022",
"creferencia": "882"
}
]
Object.entries(objeto)
te devuelve un array con un array de 2 valores por cada propiedad del json, el primero es el nombre de la propiedad y el segundo el valor. Así ya puedes hacer todo de una vez.