1

quiero poder filtrar los productos de una api, y que al hacer click sobre, por ejemplo, "Nike", solamente se muestren las cards del objeto cuya marca sea "Nike". No estoy encontrando la manera de poder hacerlo, y me esta frustando, podrian darme una mano con eso? Tambien dejo el json por si es de ayuda. La idea es que en el nav bar va a haber 6 botones cada uno de su respectiva marca, y que al hacer click en, por ejemplo "Nike", solamente muestre las cards cuya marca sea de "Nike" Muchas gracias.

const getData = async ()=>{
  const response= await fetch("data.json");
  const data = await response.json();
  
  data.forEach(({imagen, nombre, precio,id, cantidad, marca}) =>{
  let contenido = document.createElement("div");
  contenido.className="card";
  contenido.innerHTML= `
  <img src="${imagen}"/>
  <h3 class="card-name">${nombre}</h3>
  <p>${precio} $</p>
  `;

  shopContenido.append(contenido)

  let btnComprar= document.createElement("a");
  btnComprar.className="card-btn";
  btnComprar.innerHTML = `
  <img src="../img/cart.svg"/>
  `
  contenido.append(btnComprar);

}

getData();

[
  {
    "id": 1,
    "nombre": "Nike Max Janowsky",
    "precio": 55000,
    "marca": "Nike",
    "imagen": "../img/janoski.webp",
    "cantidad": 1
  },
 
  {
    "id": 3,
    "nombre": "Adidas Superstars",
    "precio": 45000,
    "marca": "Adidas",
    "imagen": "../img/Adidas Supertars.webp",
    "cantidad": 1
  },
  {
    "id": 4,
    "nombre": "Vans Ultrarange",
    "precio": 40000,
    "marca": "Vans",
    "imagen": "../img/Vans Ultrarange Exo.webp",
    "cantidad": 1
  },
  {
    "id": 5,
    "nombre": "Puma Palermo",
    "precio": 57000,
    "marca":"Puma",
    "imagen": "../img/puma.webp",
    "cantidad": 1
  },
  {
    "id": 6,
    "nombre": "Topper Terre",
    "precio": 50000,
    "marca":"Topper",
    "imagen": "../img/topper.webp",
    "cantidad": 1
  },
  {
    "id": 7,
    "nombre": "New Balance 373",
    "precio": 43000,
    "marca": "New Balance",
    "imagen": "../img/nbnegro.webp",
    "cantidad": 1
  }
 
]
4
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Y el codigo?
    – gbianchi
    Commented el 16 abr. a las 13:48
  • Que es lo que queres filtrar?? donde lo estas intentando??
    – gbianchi
    Commented el 16 abr. a las 14:18
  • Quiero que al hacer click sobre botones especificos que estan definidos en el HTML, solamente aparezca la card especifica seleccionada. En mi caso en el HTML tengo 6 botones, uno con la marca NIke, Adidas, Topper, Puma, Vans y New Balance. Quiero que al hacer click sobre Nike, aparezcan solo las zapatillas de Nike. Te dejo si queres la repo <github.com/FedeArabito/Re-Entrega-JS/tree/main> Commented el 16 abr. a las 14:29
  • Que es lo que has intentado?
    – alanfcm
    Commented el 16 abr. a las 15:07

1 respuesta 1

0

Para realizar esta operación en el navegador, puedes valerte del método filter del prototipo Array para obtener una versión filtrada del arreglo que recibes del API vía JSON.

Este método crea una copia del arreglo con una porción de los elementos, filtrada para aquellos del arreglo base que pasan la prueba implementada en la función que se provee como parámetro. En este caso, bastaría comprobar la igualdad de la marca con la del filtro que quieres establecer.

En el ejemplo de abajo, he definido un arreglo constante con el JSON que muestras en la pregunta (más un par de elementos para verificar que el filtro funciona correctamente).

Sobre este arreglo, que se llama todosLosDatos aplico el filtro, por ejemplo:

datos = todosLosDatos.filter((el) => el.marca === criterio);

Donde la variable criterio tiene la marca que quiero filtrar.

Para lograrlo, sin embargo, he debido hacer algunos cambios adicionales en tu implementación:

  • crear un elemento contenedor para los elementos
  • crear una función para mostrar los datos que limpia primero el contenedor y luego muestra los datos que recibe como parámetro.
  • al entrar a la página, llamo a la función para mostrar datos con todo el arreglo (constante) para mostrarlos todos.
  • En los anchors del menú de filtros, voy llamando a la función filtrar con la marca correspondiente.

En una implementación de la vida real, mantendría esta función de base separada de la que obtiene los datos desde el API.

Además de lo mencionado, he definido algunos estilos para que se vea estético y, sobre todo, para aprovechar mejor el espacio en pantalla en el snippet.

Como siempre, el código dice más que mil palabras:

const todosLosDatos = 
[
  {
    "id": 1,
    "nombre": "Nike Max Janowsky",
    "precio": 55000,
    "marca": "Nike",
    "imagen": "../img/janoski.webp",
    "cantidad": 1
  },
  {
    "id": 2,
    "nombre": "Nike Min Janowsky",
    "precio": 35000,
    "marca": "Nike",
    "imagen": "../img/janoski.webp",
    "cantidad": 1
  },
  {
    "id": 3,
    "nombre": "Adidas Superstars",
    "precio": 45000,
    "marca": "Adidas",
    "imagen": "../img/Adidas Supertars.webp",
    "cantidad": 1
  },
  {
    "id": 4,
    "nombre": "Vans Ultrarange",
    "precio": 40000,
    "marca": "Vans",
    "imagen": "../img/Vans Ultrarange Exo.webp",
    "cantidad": 1
  },
  {
    "id": 5,
    "nombre": "Puma Palermo",
    "precio": 57000,
    "marca":"Puma",
    "imagen": "../img/puma.webp",
    "cantidad": 1
  },
  {
    "id": 6,
    "nombre": "Topper Terre",
    "precio": 50000,
    "marca":"Topper",
    "imagen": "../img/topper.webp",
    "cantidad": 1
  },
  {
    "id": 7,
    "nombre": "New Balance 373",
    "precio": 43000,
    "marca": "New Balance",
    "imagen": "../img/nbnegro.webp",
    "cantidad": 1
  },
  {
    "id": 8,
    "nombre": "New Balance 374",
    "precio": 43500,
    "marca": "New Balance",
    "imagen": "../img/nbnegro.webp",
    "cantidad": 1
  }
];

function mostrarDatos(datos) {
  let listado = document.getElementById("listado");
  listado.innerHTML = "";
  let data = datos;
  data.forEach(({imagen, nombre, precio,id, cantidad, marca}) => {
    let contenido = document.createElement("div");
    contenido.className="card";
    contenido.innerHTML= `
      <h3 class="card-name">${nombre}</h3>
      <p>${precio} $</p>
    `;
    //shopContenido.append(contenido);
    let btnComprar= document.createElement("a");
    btnComprar.className="card-btn";
    btnComprar.innerHTML = `<img src="../img/cart.svg"/>`;
    contenido.append(btnComprar);
    listado.append(contenido);
  });
}

function filtrar(criterio) {
  let datos;
  if (criterio === "") {
    datos = todosLosDatos;
  } else {
    datos = todosLosDatos.filter((el) => el.marca === criterio);
  }
  mostrarDatos(datos);
}

mostrarDatos(todosLosDatos);
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 20px;
  row-gap: 20px;
}

.card {
  border-style: solid;
  border-width: 2px;
  border-color: #f95959;
  border-radius: 5px;
  background: #455d7a;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #233142;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
<h1>Listado de productos</h1>
<div>
  <ul>
    <li><a onClick="filtrar('')">Todos</a></li>
    <li><a onClick="filtrar('Adidas')">Adidas</a></li>
    <li><a onClick="filtrar('New Balance')">New Balance</a></li>
    <li><a onClick="filtrar('Nike')">Nike</a></li>
    <li><a onClick="filtrar('Puma')">Puma</a></li>
    <li><a onClick="filtrar('Vans')">Vans</a></li>
    <li><a onClick="filtrar('Topper')">Topper</a></li>
  </ul>
</div>
<div id="listado" class="container">
</div>

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.