0

Tengo este documento en mi coleccion de firebase, el cual necesito usar los datos ahi almacenados para generar una tabla. Este es un ejemplo:

 {
    idReport: 1,
    fechaReport: 1671571252625 ,
    nombreReport: 'Reporte de marca y codMarca',
    filas: {
      fila1: {
        campo: "marca",
        data: ['ARO', 'LAVA', 'LAVAX', 'M&K', 'MISAY', 'POR ASIGNAR'],
      },
      fila2: {
        campo: "codMarca",
        data: ['000', '001', '031', '034', '035', '037'],
      }
    },
    columnas: {
      columna1: {
        campo: "dni",
        data: [ "002335320","00251971","01870087","07461671","08453100","10197075","15358913","20532057","25755976","32028784","40137406","40887352","40916178","41276688","41667376","41740528","42099254","42937450","42966414","43228412","44202123","46222913","46518452","47397154","70744361","80228541",null 
]
      }
    },
    valores: {
      valor1: {
        campo: "soles",
        data: [0, 100.3983, 10026.42232, 102934.25846, 104.1017, 105.22032, 1076.4336, 1080.7628, 109.26915, 1090.25425, 10902.5425, 110.37288, 11444.35012, 1150.6704, 1155.93 ]

      }
    }
}

Este es mi codigo, donde intente hacerlo, pero me genera muchos errores; uno de esos es este error: Uncaught TypeError: Cannot read properties of undefined (reading 'columna1')

import React, { useState, useEffect } from "react";
import { getLastDocumentOfTheCollection } from "../Firebase/firebase.config";

const GeneratedReport = () => {
  const [data, setData] = useState([]);

  console.log(data, "data");

  useEffect(() => {
    getLastDocumentOfTheCollection(setData);
  }, []);
  return (
    <div className="container-ReportGenerated">
      <div className="table-wrapper">
        <table className="containerTable">
          <thead>
            <tr>
              {data.columnas.columna1.data.map((columns, i) =>
                columns === "" ? <td key={i}></td> : <td key={i}>{columns}</td>
              )}
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  );
};

export default GeneratedReport;

La tabla que necesito generar tiene que ser algo similar a esto: introducir la descripción de la imagen aquí

Los datos de fila 1 y fila 2 deben ir de forma vertical al comienzo de la tabla, como se muestra ene le ejemplo en la zona amarilla. Los datos de columnas, serán el encabezado horizontal de todas las columnas (como se ve en la zona verde del ejemplo) y lo valores iran en las celdas de toda la tabla (como se ve en la zona roja).

Si alguien me puede dar una idea de como lograr esto, lo agradezco. También acepto sugerencias!

2 respuestas 2

1

Cuando inicializas data, haces lo siguiente:

const [data, setData] = useState([]);

Por tanto, el valor inicial es un array vacío.

Así que cuando se intenta montar la tabla, tienes:

{data.columnas.columna1.data.map(...)}

Si data es un array, no tiene la propiedad columnas (es undefined), por lo que es normal que ocurra ese error.

Puedes iniciar data directamente con null y luego hacer algo como

{data?.columnas?.columna1?.data.map(...) }

Y así, si data está vacío (es null), no se mostrará nada

1
  • Gracias, esto resolvio el error que tenia. ME podrias dar una idea de como puedo generar mi tabla en base a los datos de ese json que puse como ejemplo en la pregunta...
    – Ndmo
    Commented el 21 dic. 2022 a las 16:37
0

Importa la biblioteca de Firebase en tu componente de React donde quieras mostrar la tabla:

import firebase from 'firebase/app';
import 'firebase/database';

Inicializa Firebase en tu componente de React:

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID'
});

Crea una referencia a tu base de datos JSON en Firebase:

const database = firebase.database();
const ref = database.ref('/path/to/your/json/file');

Utiliza el método once() de la referencia para leer los datos del archivo JSON una vez:

ref.once('value').then(function(snapshot) {
  const data = snapshot.val();
});

Usa la variable data para crear una tabla en tu componente de React. Puedes hacerlo de la siguiente manera:

render() {
    return (
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                {data.map(item => (
                    <tr key={item.id}>
                        <td>{item.column1}</td>
                        <td>{item.column2}</td>
                        <td>{item.column3}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}
1
  • Estas respuestas parecen autogeneradas, ya he visto varias
    – g.4
    Commented el 21 dic. 2022 a las 18:06

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.