0

Estoy recorriendo un array de objetos con el método .map pero necesito mostrar el array de objetos dentro del mismo "producto" adicionalmente el array de "aplicaciones"... ya que el "producto" tiene dichas aplicaciones, he recorrido el array con .map.. todo bien, pero las aplicaciones seria genial que estén dentro de un ul>li.. dentro de la misma tarjeta del producto..

  const aplicaciones = productos.length > 0 && productos.map((serie) => {
    console.log('productosLENGHT', productos.length)
    return (
      <div style={{ border: '1px solid blue' }}>
        <h1>{serie.nombre} </h1>
        {serie.marca.length > 0 && serie.marca.map((season) => (
          <>
            <p>{season.nombreMarca}</p>
            <p>{season.precioVenta}</p>
          </>
        ))}
        {serie.aplicacion.length > 0 && serie.aplicacion.map((season) => (
          <ul>
            <li>{season}</li>
          </ul>
        ))}
      </div>
    );
  });

ARRAY

Añado el código la cuestion es que busco nuevamente y habiendo productos me marca error en la longitud de la marca error.map

adjunto código.

[![introducir la descripción de la imagen aquí][2]][2]

introducir la descripción de la imagen aquí

3
  • Cómo o cuál es la relación que existe entre las aplicaciones y el producto? Es decir ambos productos tienen el mismo conjunto de aplicaciones? También ayudaría ver tu código de React
    – Jacobo
    Commented el 3 mar. 2022 a las 1:29
  • Suponiendo que quieres pintar el nombre y una lista de a que autos aplica estimo que podrias hacer llo siguiente: tuArray.map(el => ´{<div>${el.nombre}</div><br><p>Aplicacion</p><br><ul>${el.aplicacion.map(el => ´<li>${el}</li>´).join("")}</u>´).join("") Commented el 3 mar. 2022 a las 3:08
  • Stack Overflow en español te da las herramientas necesarias para postear código en la pregunta, por lo tanto escribe tanto el código como los mensajes de error como texto, con formato, No todos pueden visualizar las imágenes, mucho menos copiar texto de ellas :)
    – padaleiana
    Commented el 3 mar. 2022 a las 17:07

1 respuesta 1

0

La solución es volver a recorrer el array, ya que dentro se encuentra el siguiente array.

 const aplicaciones = productos.length > 0 && productos.map((serie) => {
    console.log('productosLENGHT', productos.length)
    return (
      <div style={{ border: '1px solid blue' }}>
        <h1>{serie.nombre} </h1>
        {serie.marca.length > 0 && serie.marca.map((season) => (
          <>
            <p>{season.nombreMarca}</p>
            <p>{season.precioVenta}</p>
          </>
        ))}
        {serie.aplicacion.length > 0 && serie.aplicacion.map((season) => (
          <ul>
            <li>{season}</li>
          </ul>
        ))}
      </div>
    );
  });
1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 3 mar. 2022 a las 20:13

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.