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.