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
}
]