1

Tengo este archivo json que fue creado por mi, si para facilitar la tarea deberia cambiarlo, por favor diganlo

[
  {
    "id": 1,
    "nombre": "Tony Hawk Eye of the Hawk",
    "stock": 10,
    "precio": 10300,
    "descripcion": "La tabla \"Eye of the Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
    "imagen": "./images/skatetony2.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 2,
    "nombre": "Tony Hawk Diving Hawk",
    "stock": 3,
    "precio": 10300,
    "descripcion": "La tabla \"Diving Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
    "imagen": "./images/skatetony.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 3,
    "nombre": "Verb Adam Bergeisha",
    "stock": 6,
    "precio": 10300,
    "descripcion": "Lujosa en diseño, la plataforma de skate modelo profesional \"Verb Adam Bergeisha\" más nueva de Nick Tucker está cubierta con un impresionante gráfico de una geisha en tonos metálicos y pastel.",
    "imagen": "./images/geishaskate.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 4,
    "nombre": "Lizzie Birdhouse Medusa",
    "stock": 3,
    "precio": 10300,
    "descripcion":"Este modelo inspirado en Lizzie Armanto ofrece un diseño duradero de arce hardrock y gráficos dementes de Medusa revisando su teléfono para un aspecto único que te inspirará a llamar a tus amigos para una sesión de patinaje.",
    "imagen": "./images/skatemedusa.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 5,
    "nombre": "Hydroponic Pullet Mike",
    "stock": 2,
    "precio": 10300,
    "descripcion":"Una tabla inspirada para todos los niveles de skaters, desde iniciales hasta pro's, con tapa de arce y un diseño fino, es ideal para probar todas las piruetas que quieras",
    "imagen": "./images/skaterat.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 6,
    "nombre": "Hydroponic Mexican Skull",
    "stock": 6,
    "precio": 10300,
    "descripcion":"Una tabla inspirada en las tipicas calacas mexicanas, con una construccion basada en arce y resina epoxi de 7 capas, es ideal para las piruetas mas extremas que tu mente puede planear",
    "imagen": "./images/skatemex.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 7,
    "nombre": "Birdhouse Chicken",
    "stock": 2,
    "precio": 10300,
    "descripcion":"Una tabla hecha con 7 capas de Hardrock Maple, lo que le aporta una mayor resistencia para poder hacer todos esos trucos que tanto nos gustan! ",
    "imagen": "./images/birdchiken.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 8,
    "nombre": "Heart Supply Peace",
    "stock": 2,
    "precio": 10300,
    "descripcion":"La Heart Supply Peace es una tabla de skateboard de calidad hecha de arce. Gracias a la construcción en arce disfrutarás de un pop excelente. Una base que presenta una forma de pop con doble kick, que te ayuda a conseguir potentes ollies y nollies con confianza.",
    "imagen": "./images/skateheart.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 9,
    "nombre": "Vans Old Skool",
    "stock": 2,
    "precio": 15300,
    "imagen": "./images/VansOldSkoolNegras.JPG",
    "categoria": "calzado"
  },
  {
    "id": 10,
    "nombre": "Vans U Authentic",
    "stock": 5,
    "precio": 16300,
    "imagen": "./images/VansUAuthentic.JPG",
    "categoria": "calzado"
  },
  {
    "id": 11,
    "nombre": "Vans Era",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansEra.JPG",
    "categoria": "calzado"
  },
  {
    "id": 12,
    "nombre": "Vans Ultra Range",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansUltraRangeNegras.JPG",
    "categoria": "calzado"
  },
  {
    "id": 13,
    "nombre": "Vans U Sports",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansUSports.JPG",
    "categoria": "calzado"
  }
]

El cual necesito filtrar, ya que debo mostrar los elementos agrupados por su "categoria", logre filtrar la categoria y mostrarla en los titulos, pero no logro hacer que los elementos que se muestran debajo de cada titulo contengan esas categorias, ya que seria como un proyecto de simulacion de una tienda.

const ItemList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      fetch("./data.json")
        .then((Response) => Response.json())
        .then((data) => setProducts(data));
    }, 2000);
  }, []);

  const categories = [...new Set(products.map((category) => category.categoria))]


  return (
      <div>    
      {categories.map((category =>{ 
          return [<h2>{category}</h2>,
          <div className="grillaProductos">
              {products.filter(category => category.categoria).map(product =>{
                return <Item data={product} key={product.id}/>
            })}
          </div>]
        }))}

      </div>
  );
};

Desde ya agredezco su lectura, y cualquier mano que puedan aportar para salir del embrollo, lo agradeceria

!!

2 respuestas 2

1

Te falta sólo la condición dentro del filter para agruparlo como quieres. Además, por temas de ambigüedad debes renombrar el alias que tienes ya que, el primer map también tiene como alias category

return (
   <div>    
      {categories.map((category =>{ 
         return [<h2>{category}</h2>,
            <div className="grillaProductos">
               {products.filter(c => c.categoria === category).map(product =>{
                  return <Item data={product} key={product.id}/>
                })}
            </div>]
      }))}
   </div>
);

De todas maneras, te recomendaría crear una función en la que crees la estructura que necesitas, así no debes recorrer dos veces las variables.

Eso se puede hacer mediante un reduce

const buildCategories = () => {
   const list = data.reduce((prev, curr) => {
      const index = prev.findIndex(i => i?.categorie === curr.categoria);

      if (index >= 0)
         prev[index].items.push(curr);
      else
         prev.push({ categorie: curr.categoria, items: [curr] });

      return prev;
   }, []);

   return list;
};

Y luego renderizarlo así

return (
   <div>
      {buildCategories().map((item, index) => (
         <div key={index}>
            <h2>{item.categorie}</h2>

            <div className='grillaProductos'>
               {item.items.map((i, idx) => (
                  <Item data={i} />
               ))}
            </div>
         </div>
      ))}
   </div>
);

Nos comentas que tal te va :)

3
  • Paulo puedo escribirte por privado? el 29 nov. 2021 a las 18:06
  • Dale dale, no hay problema :) el 29 nov. 2021 a las 18:45
  • Te dejo un msj aqui abajo porque no he podido iniciar el chat el 29 nov. 2021 a las 19:13
0

He logrado hacer funcionar el hecho de que extraiga la categoría capturándola en un array quedando de esta manera.

const ItemList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      fetch('./data.json')
        .then((Response) => Response.json())
        .then((data) => setProducts(data));
    }, 2000);
  }, []);


  const categories = [...new Set(products.map((category) => category.categoria))]


  const renderCategory = (category) => {
    return (
      <div key={category}>
        <h2 className="titleCategory">{category}</h2>
        <div className="grillaProductos">
        {products.filter((product) => product.categoria === category).map(product=>{
                return <Item data={product} key={product.id}/>
            })}
        </div>
      </div>
    );
  };

  return <div>{categories.map(renderCategory)}</div>;
};

Ahora bien, pensé que luego podría extraer la propiedad category y poder utilizarla en otros lugares, pero no estoy pudiendo lograrlo, ya que necesitaría extraerla para crear páginas donde filtre directamente por categoría desde el navbar. Al ver la opcion "skate" por ejemplo traer solamente los skates.

2
  • Para agregar información adicional recuerda que siempre puedes editar tu pregunta, esta sección es solo para respuestas que dan solución a la pregunta planteada. ;)
    – Israel-ICM
    el 29 nov. 2021 a las 19:23
  • Como te comenta @Israel-ICM, debes editar la pregunta o crear una nueva, ya que el problema inicial ya se solucionó. el 29 nov. 2021 a las 20:28

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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