I have a general clothing catalog made in js and I insert it to my html with insertadjacenthtml with an id but I want to filter it when a button is pressed.
If I press the button "hombre"= I want to show only the elements of my array with the attribute Gen:"more".
If I press the "mujer"= button I want to show only the elements of my array with the Gen:"fem" attribute.
If I press the button "infantes"= I want to show only the elements of my array with the attribute Gen:"inf".
how can i do it
This is my js
let filt_mas = document.getElementById("filt_mas");
let filt_fem = document.getElementById("filt_fem");
let filt_inf = document.getElementById("filt_inf");
function addItem(prods) {
const mainProds = document.getElementById("main__prods");
prods.gen.forEach(prod => {
mainProds.insertAdjacentHTML("beforeend",
`
<!-- productos-->
<div class="col" style="margin-bottom: 1rem;">
<div class="card card__team h-100">
<div style="text-align: center;">
<img src="${prod.image}"
style="width: 150px; height: 150px; margin-top: 1rem;"
class="img-fluid rounded" alt="${prod.title}">
</div>
<div class="card-body">
<div class="title__card">
<span>${prod.title.slice(0, 30)}</span>
</div>
<div class="subtitle__card">
<span>${prod.Origen}</span>
</div>
<p class="card-text" style="text-align: justify;">${prod.description} ... </p>
</div>
<div style="text-align:right; margin-top:0;">
<button type="button" class="btn btn-warning btn-producto" data-bs-toggle="modal" data-bs-target="#exampleModal${prod.id}">
Ver más
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</button>
</div>
<div class="modal fade" id="exampleModal${prod.id}" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><strong>${prod.title}</strong> </h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid text-center" id="singleprod">
<div class="row" style="width: 100%;">
<div class="col" style="width: 15%;">
<ul class="list-group">
<li class="list-group-item"><img src="${prod.image}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image2}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image3}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
</ul>
</div>
<div class="col" style="width: 50%;">
<img src="${prod.image}" class="rounded mx-auto d-block" alt="..." style="width: 300px; height: 450px;">
</div>
<div class="col" style="width: 35%;">
<!--Nombre del producto-->
<h5 id="nombre_producto">Precio: $ ${prod.price}</h5>
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">Codigo:</p>
</div>
<div class="col">
<p class="codigo">${prod.id}</p>
</div>
</div>
</div>
<!--Talla-->
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">Talla</p>
</div>
<div class="col">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Elige una talla
</button>
<ul class="dropdown-menu" id="menutallas">
<li>Chica</li>
<li>Mediana</li>
<li>Grande</li>
<li>Extra Grande</li>
</ul>
</div>
</div>
</div>
</div>
<!--Color-->
<p class="codigo">Color</p>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1"><div class="col-1 red"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2"><div class="col-1 green"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2"> <div class="col-1" style="background-color: blue;
width: 10px;
height: 10px;"></div></label>
</div>
</div>
<!--Descripcion-->
<div class="descripciones-modal">
<p>Descripción</p>
<ul>
<li>${prod.Desc1}</li>
<li>${prod.Desc2}</li>
<li>${prod.Desc3}</li>
<li>${prod.Origen}</li>
<p>${prod.description}</p>
</ul>
</div>
<!--Botones-->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btnmodal btn-secondary">Comprar</button>
<button type="button" class="btn btnmodal btn-secondary">Carrito</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btnmodal btn-secondary"
data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
`
);
});
}
filt_mas.addEventListener("click", function(event){
});
filt_fem.addEventListener("click", function(event){
prod.some((prod) =>{
return prod.gen == "fem"
})
});
filt_inf.addEventListener("click", function(event){
prod.some((prod) =>{
return prod.gen == "inf"
})
});
prod1 = [
{ id: 1, title: "Camisa Yucateca manga corta", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/camisa1-blanca.jpg", image2: "./src/img/ropa-kotomitl/camisa1-azul.jpg", image3: "./src/img/ropa-kotomitl/camisa1-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 2, title: "Camisa Yucateca manga larga", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/camisa2-blanca.jpg", image2: "./src/img/ropa-kotomitl/camisa2-azul.jpg", image3: "./src/img/ropa-kotomitl/camisa2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 3, title: "Poncho mexicano", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/poncho2-blanco.jpg", image2: "./src/img/ropa-kotomitl/poncho1-azul.jpg", image3: "./src/img/ropa-kotomitl/poncho1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 4, title: "Short artesanal", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/short1-blanca.jpg", image2: "./src/img/ropa-kotomitl/short1-azul.jpg", image3: "./src/img/ropa-kotomitl/short1-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 5, title: "Traje de baño artesanal", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/short2-blanca.jpg", image2: "./src/img/ropa-kotomitl/short2-azul.jpg", image3: "./src/img/ropa-kotomitl/short2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 6, title: "Zapato de piel", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/zapato1-blanca.jpg", image2: "./src/img/ropa-kotomitl/zapato1-azul.jpg", image3: "./src/img/ropa-kotomitl/zapato1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 7, title: "Camisa Yucateca", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/pantalon1-blanca.jpg", image2: "./src/img/ropa-kotomitl/pantalon2-azul.jpg", image3: "./src/img/ropa-kotomitl/pantalon2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"fem",rating: { "rate": 4.9, "count": 500 } },
{ id: 8, title: "Sandalias de piel", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/sandalias1-blanco.jpg", image2: "./src/img/ropa-kotomitl/sandalias1-azul.jpg", image3: "./src/img/ropa-kotomitl/sandalias1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"inf",rating: { "rate": 4.9, "count": 500 } }
];
addItem(prod1);
my HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Productos</title>
<!-- iconos bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- css bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- fonts google-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Georama:wght@400;600&display=swap" rel="stylesheet">
<!-- css interno -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<!-- ================= NAVBAR ============== -->
<header id="navbar"></header>
<!-- ================= CONTENIDO ============== -->
<main class="container mb-5">
<!-- <section class="container"> -->
<div class="container-fluid text-center container-products">
<div class="row">
<div class="col-md-2 contenedor-navbar-catalogo d-flex justify-content-center align-items-top">
<div class="catalogo-navbar">
<ul style="list-style-type: none">
<li><button href="" class="filtro-catalogo" id="filt_mas">Hombre</button></li>
<li><button href="" class="filtro-catalogo" id="filt_fem">Mujer</button></li>
<li><button href="" class="filtro-catalogo" id="filt_inf">Infantes</button></li>
</ul>
</div>
</div>
<div class="col-md-10">
<h1 class="titulo-catalogo">Catálogo</h1>
<div id="main__prods" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 g-6">
</div>
</div>
</div>
</div>
<!-- </section> -->
</main>
<!-- ================= FOOTER ============== -->
<footer class="text-center text-lg-center justify-content-center d-flex mt-auto" id="footer"></footer>
<!-- ================= JS ============== -->
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<!--JS Nabvar & Footer-->
<script src="./js/navfooter.js"></script>
<!-- Productos -->
<script src="./js/productos2.js"></script>
</body>
</html>
I want to show my filtered items with a button
You can change the addItem function to directly replace the content of the container showing the list of products so that filtering won't keep adding more items. Here is one way to implement it (note that the function has been renamed to more accurately reflect its purpose):
function showProducts(prods) {
document.getElementById("main__prods").innerHTML =
prods.map(prod => `html to return here...`).join('');
}
Then, use Array#filter to get matching elements by the gen field, then call showProducts again with the new array.
filt_mas.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "mas"));
});
filt_fem.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "fem"));
});
filt_inf.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "inf"));
});