How to filter and inserted element in html with JavaScript

Question

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/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <!-- css bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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/bootstrap@5.3.0/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

@Barmar, I see now; thanks. OP seems to be using `Array.some()`, but I believe may want `Array.filter()` instead. — mykaf, Aug 04 '23 at 16:13
`prod.some()` just return true or false to tell if the function was true for any elements of the array. You should use `prod.filter()` to return an array of all the items that match the condition. Then use that filtered array to display the results. — Barmar, Aug 04 '23 at 16:13

score 0 · Accepted Answer · answered Aug 04 '23 at 16:53

0

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"));
});

answered Aug 04 '23 at 16:53

Unmitigated

76,500
11
62
80

See the code working here: https://jsfiddle.net/fcgLd7zp/1/ – Unmitigated Aug 04 '23 at 16:53
Wow it really works but for some reason all my products are vertical – ROBERTO RIVAS MONZON Aug 04 '23 at 18:16
@ROBERTORIVASMONZON You're missing a `` at the end of the template string. It's been added to the JSFiddle example, so it shows correctly there. – Unmitigated Aug 04 '23 at 18:17
thank you so much for your help it really works you are amazing :D – ROBERTO RIVAS MONZON Aug 04 '23 at 18:20
@ROBERTORIVASMONZON Happy to help. – Unmitigated Aug 04 '23 at 18:20

How to filter and inserted element in html with JavaScript

1 Answers1