Skip to main content
Correcciones en redacción, formato agregado, meta-etiqueta y ruido removidos
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Cordial saludo para todos en esta gran comunidad. TengoTengo el siguiente código con la función renderHeaderCellsrenderHeaderCells: 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. Estoy usando la función renderResultsrenderResults para iterar los valores e insertarlos en la tabla, sin embargo no sé quequé está mal.

Les agradezco de antemano su ayuda.

Cordial saludo para todos en esta gran comunidad. 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é que está mal.

Les agradezco de antemano su ayuda.

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.

Origen Enlace

Iterar valores de un json y agregarlos a una tabla en react

Cordial saludo para todos en esta gran comunidad. 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é que 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"
    }
]

Les agradezco de antemano su ayuda.