Filter data using input value

Viewed 35

I'm trying to filter data according to input value. I want to create an array with an objects but im getting array of [object Object].

First Im creating an empty Array:

let beersArray = [];

Later during creating elements I want to add to array an object with item name:

  function displayAllBeers(data) {
    beersArray = data
      .map((beer) => {
        beersContainer.innerHTML += `
        <div class='beerContainer'>
            <h3 class='name'>${beer.name}</h3>
            <img src='${beer.image_url}'></img>
            <p>${beer.description}</p>
            <button class="addFavBtn">Favourite</button>
            </div>
            `;
        return { name: beer.name };
      })
      .join("");
  }

Finally I add event listener to the input and want to filter the result

  searchInput.addEventListener("input", (e) => {
    const value = e.target.value;
    console.log(beersArray);
    beersArray.forEach((beer) => {
      const isVisible = beer.includes(value);
      beer.element.classList.toggle("hide", !isVisible);
    });
  });

I'm getting error:

app.js:17 Uncaught TypeError: beersArray.forEach is not a function at HTMLInputElement. (app.js:17:16)

If I'm trying to do

Array.from(beersArray) 

It puts in array every single letter as an element.

Please tell me what I'm doing wrong. Thank you in advance.

0 Answers
Related