Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

182
Vistas
REACT: muestra el contenido de mi archivo json pero solo obtiene el encabezado

No puedo mostrar el contenido de mi archivo json en mi tabla. Obtengo los encabezados pero nada en las celdas.

Aquí está mi código:

 import Table from './Table' import Menu from "./menus.json" export default function Display() { const [menu, setMenu] = useState([Menu]); const data = useMemo(() => [ { Header: 'Id', accessor: menu.id, }, { Header: 'Title', accessor: menu.title, }, { Header: 'Invited', accessor: menu.invited.name, }, { Header: 'Price', accessor: menu.price, }, ], []) return ( <Table data={menu} columns={normalizeData(data.result)}> ) }

Justo antes de la devolución probé un Object.keys(data).map((key) => ({id: key,})); pero no funciona

Gracias por tu ayuda !

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Los datos JSON son un objeto:

 { "menus": [ { "id": "Menu1", "title": "Creamy pea soup topped with melted cheese and sourdough croutons.", "price": 4, "invited": [ { "name": "Jose Luis", "location": "LA" }, { "name": "Smith", "location": "New York" }, ], }, ... ] }

...

 import JsonData from "./menus.json"; ... const { menus } = JsonData;

La propiedad accessor no es correcta.

Opciones de columna

  • accessor: String | Function(originalRow, rowIndex) => any
    • Requerido
    • Esta cadena/función se usa para construir el modelo de datos para su columna.
    • Los datos devueltos por un descriptor de acceso deben ser primitivos y ordenables.
    • Si se pasa una cadena, el valor de la columna se buscará en la fila original a través de esa clave, por ejemplo. Si el acceso de su columna es firstName , entonces su valor se leerá desde row['firstName'] . También puede especificar valores profundamente anidados con elementos de acceso como info.hobbies o incluso address[0].street
    • Si se pasa una función, el valor de la columna se buscará en la fila original usando esta función de acceso, por ejemplo. Si el descriptor de acceso de su columna es row => row.firstName , entonces su valor se determinaría pasando la fila a esta función y usando el valor resultante.
    • Técnicamente hablando, este campo no es obligatorio si tiene una identificación única para una columna. Esto se usa para cosas como expansión o columnas de selección de filas. Advertencia : solo omita el accessor si realmente sabe lo que está haciendo.

Usa accesorios punzantes

 const data = useMemo( () => [ { Header: "Id", accessor: "id" }, { Header: "Title", accessor: "title" }, { Header: "Invited", accessor: "invited[0].name" // because invited is an array }, { Header: "Price", accessor: "price" } ], [] );

O usar una función

 const data = useMemo( () => [ { Header: "Id", accessor: row => row.id }, { Header: "Title", accessor: row => row.title }, { Header: "Invited", accessor: row => row.invited[0].name }, { Header: "Price", accessor: row => row.price } ], [] );

Editar reaccionar-mostrar-contenido-de-mi-archivo-json-pero-obtener-solo-el-encabezado

about 4 years ago · Santiago Trujillo Denunciar

0

import { menus } from "./menus.json";

¿Tal vez intentas hacer esto?

about 4 years ago · Santiago Trujillo Denunciar

0

Creo que debería ser Menu.menus o puedes desestructurarlo para:

 const {menus} = Menu
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda