0

estoy realizando un ejercicio de React y tengo que mostrar en la pantalla los datos que recibo de un archivo Json. Recibo bien los datos, le hago dos map, para acceder a un array anidado, le realizo un console.log que si me pinta lo que necesito, pero al pasarle estos datos al componente hijo me falla. No se si me he explicado bien, si hay alguna duda, respondere encantado. Gracias por su ayuda.

Este es la parte del código del componente padre. Solo pongo el trozo necesario.

<Typography paragraph>
                {
                  CartaJson.carta.map((cartas)=> 
                    cartas.entrantes.map((entrante) => {
                      console.log(entrante.id)
                      return(
                    <CardMenu key={entrante.id} entrante={entrante}/>
                    )
                    })
                  )
                }
              </Typography>

Aquí el componente hijo, donde debería recibir los datos y donde me da el error.

const CardMenu = ({entrante}) => {
  return (
    <div>
        <h3>Entrantes</h3>
        <p>{entrante.nombre}</p>
        <img src= {entrante.image} alt= {entrante.alt}/>
    </div>
  )
}

Y el archivo Json de donde saco los datos.

{
    "carta": [
        {
            "entrantes": [
                {
                    "id": 101,
                    "nombre": "Gambas al ajillo",
                    "image": "https://i-ticketing.iwos.com/256x256-th/products/165/products_165_4.png",
                    "alt": "Gambas al ajillo",
                    "precio": 15.90,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "crustaceos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 102,
                    "nombre": "Ensalada del Mesón",
                    "image": "https://media-cdn.tripadvisor.com/media/photo-s/1b/c2/f9/56/ensalada.jpg",
                    "alt":"Ensalada del Mesón",
                    "precio": 8.60,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": false,
                    "alergenos": [
                        "huevos",
                        "crustaceos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 103,
                    "nombre": "Pulpo a la Gallega",
                    "image": "https://lacocinademasito.com/wp-content/uploads/2021/02/Pulpo-a-la-gallega.jpg",
                    "alt":"Pulpo a la gallega",
                    "precio": 15.90,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "crustaceos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 104,
                    "nombre": "Tartar de Salmón Marinado",
                    "image": "https://elfornerdealella.com/wp-content/uploads/2021/03/Tartar-de-salmo%CC%81n-marinado.jpg",
                    "alt":"Tartar de Salmón",
                    "precio": 10.50,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": false,
                    "alergenos": [
                        "pescado"
                    ],
                    "observaciones":null
                },
                {
                    "id": 105,
                    "nombre": "Gazpacho Andaluz",
                    "image": "http://www.comedera.com/wp-content/uploads/2015/06/gazpacho.jpg",
                    "alt":"Gazpacho",
                    "precio": 7.50,
                    "vegetariano": true,
                    "vegano": true,
                    "menu": true,
                    "alergenos": [
                        "gluten"
                    ],
                    "observaciones":null
                },
                {
                    "id": 106,
                    "nombre": "Carpaccio de Salmón Marinado",
                    "image": "https://cdn.shopify.com/s/files/1/0497/1659/2805/products/CARPACCIO_SALMON_100G_1200x.png?v=1641931394",
                    "alt":"Carpaccio de Salmón",
                    "precio": 10.90,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "pescado",
                        "lacteo"
                    ],
                    "observaciones":null
                }
            ]
        },
        {
            "tapas": [
                {
                    "id": 201,
                    "nombre": "Ensaladilla Rusa",
                    "image": "https://images.hola.com/imagenes/cocina/recetas/20191007150998/ensaladilla-rusa/0-729-420/ensaladilla-m.jpg",
                    "alt":"Ensaladilla Rusa",
                    "precio": 5.90,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": false,
                    "alergenos": [
                        "crustaceos",
                        "lacteos",
                        "huevos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 202,
                    "nombre": "Patatas bravas",
                    "image": "https://unareceta.com/wp-content/uploads/2017/06/patatas-bravas.jpg",
                    "alt":"Patatas Bravas",
                    "precio": 4.90,
                    "vegetariano": true,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "lacteos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 203,
                    "nombre": "Callos de ternera",
                    "image": "https://res.cloudinary.com/unaderecetas/image/upload/callos-de-ternera/callos_base_1.jpg",
                    "alt":"Callos de ternera",
                    "precio": 7.50,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": false,
                    "alergenos": false,
                    "observaciones":null
                },
                {
                    "id": 204,
                    "nombre": "Fritura de Pescados",
                    "image": "https://i.blogs.es/0ba695/el-pescaito-frito-y-las-sopas-frias-enganchan-cada-dia-a-mas-turistas-hacia-la-costa-del-sol/450_1000.jpg",
                    "alt":"Fritura de pescado",
                    "precio": 13.50,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "pescados",
                        "crustaceos",
                        "moluscos",
                        "gluten"
                    ],
                    "observaciones":null
                },
                {
                    "id": 205,
                    "nombre": "Tortilla de patatas",
                    "image": "https://static2.abc.es/media/bienestar/2020/05/22/[email protected]",
                    "alt":"Tortilla de patatas",
                    "precio": 4.90,
                    "vegetariano": true,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "gluten",
                        "huevos"
                    ],
                    "observaciones":null
                },
                {
                    "id": 206,
                    "nombre": "Calamares a la Romana ",
                    "image": "https://unareceta.com/wp-content/uploads/2017/04/calamares-a-la-romana-tiernos-818x614.jpg",
                    "alt":"Calamares a la romana",
                    "precio": 8.90,
                    "vegetariano": false,
                    "vegano": false,
                    "menu": true,
                    "alergenos": [
                        "moluscos",
                        "huevos",
                        "gluten"
                    ],
                    "observaciones":null
                }    
      ]}
]}

1 respuesta 1

0

Tras intentar reproducir tu código he encontrado el siguiente error. Si esta no es la solución que buscabas, por favor, sube el error que te sale para poder ayudarte.

Dentro del objeto CartaJson hay un array carta, que a su vez contiene dos objetos, el primero de los objetos contiene otro objeto llamado entrantes y el segundo tiene un objeto llamado tapas.

Cuando haces el primer .map() obtienes del array carta los objetos:

1- {"entrantes":[...]}
2- {"tapas":[...]}

Luego al ejecutar el siguiente código:

cartas.entrantes.map((entrante) => ...)

Estás accediendo al array entrantes, el cual el segundo objeto no contiene, sino que tiene uno llamado tapas, por eso da error.

La solución que aconsejo es la siguiente:

JSON:

{
  "carta": {
    "entrantes": [{...},{...}],
    "tapas": [{...},{...}],
  }
}

(Obviamente reemplazar los "..." por el contenido de la carta)

JavaScript:

CartaJson.carta.entrantes.map(entrante => {
   console.log(entrante.id)
   return(
      <CardMenu key={entrante.id} entrante={entrante}/>
   )
});

Esta solución solo incluye los elementos del array entrantes, los del array tapas se deberían iterar de la siguiente manera:

CartaJson.carta.tapas.map(tapa => {
   console.log(tapa.id)
   return(
      // Renderizar objeto para las tapas
   )
});

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.