0

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"
    }
]
2
  • Si usas 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.
    – Suso
    Commented el 23 jul. 2022 a las 14:03
  • Gracias @Suso, ¿Cómo lo haría dentro del código?
    – Jair Vides
    Commented el 23 jul. 2022 a las 14:05

2 respuestas 2

1

Podrías hacer la iteración directamente en el return.

    <React.Fragment>
        {data && data.length > 0
        ?<table>
            <thead>
            <tr>
                {Object.keys(data[0]).map(x => {
                    return <th>{x}</th>
                })}
            </tr>
            </thead>
            <tbody>
                {data.map(x => {
                    return <tr>
                        {Object.values(x).map(y =>{
                            return <td>{y}</td>
                        })}
                    </tr>
                })}
            </tbody>
        </table>
        : <></>}
    </React.Fragment>

Siempre y cuando data sea el array que pusiste al principio y tengan las mismas propiedades y en la misma posición.

    const data = [
    {
        "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"
    }
]

Si quisieras controlar las propiedades de los objetos, tendrías que hacer algo así:

    const [mappedData, setMappedData] = useState({});
const data = [
    {
        "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": "DV2400",
        "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"
    }
]

useEffect(()=>{
    getTableData();
},[])

function getTableData(){
    const headers = [];
    data.forEach(x =>{
        Object.keys(x).forEach(y =>{
            if(!headers.some(z => z === y)) headers.push(y);
        });
    });
    console.log(headers);
    setMappedData({...mappedData, headers});
}

return (
    <React.Fragment>
        {mappedData && mappedData.headers?.length > 0
        ?<table>
            <thead>
            <tr>
                {mappedData.headers.map(x => {
                    return <th>{x}</th>
                })}
            </tr>
            </thead>
            <tbody>
                {data.map(x => {
                    return <tr>
                        {mappedData.headers.map(y =>{
                            if(x[y]) return <td>{x[y]}</td>
                            else return <td></td> 
                        })}
                    </tr>
                })}
            </tbody>
        </table>
        : <></>}
    </React.Fragment>
);
1
  • Excelente compañero @Suso, esto era lo que estaba buscando, gracias.
    – Jair Vides
    Commented el 26 jul. 2022 a las 21:28
0

Si utilizo está función me itera solo un value, cómo quedaría para iterar todos los values del json:

function renderResults() {
     let results = [];
     let res = Object.values(nominImport);
          if (res !== undefined){
               res.map((x,index) =>{
                    results.push(<td key={index.name}>{x}</td>);
                    return results;
               });      
          return results;
          }
          return results;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.