У меня есть DATA, в которой содержаться данные, на сайте есть фильтрация, сделана через select, данные этого select'a это массив значений. То есть если в select'е выбрать value, который есть в DATA этот товар должен отображаться. Сейчас возникает ошибка при попытке фильтрации:
Например, если в фильтре выбрано "A", должен отображаться только первый и второй товар.
Вот что у меня есть:
const filters = document.querySelector("#filters");
filters.addEventListener("input", filterGoods);
function filterGoods() {
const category = filters.querySelector("#category").value;
outputGoods(DATA.filter((n) => (!category.length || category.filter((s) => n.category.includes(s)).length)));
}
function outputGoods(goods) {
document.getElementById("goods").innerHTML = goods
.map(
(n) => `
<div class="school-wrapper">
<div class="school__row">
<div class="school__col__left">
<div class="school__logo">
<img src="" alt="${n.title}">
<div class="school__rating">
${n.rating}
</div>
<div class="school__reviews">
<span>Кол-во отзывов: ${n.reviews}</span>
</div>
<button class="school__btn"> ${n.category} </button>
</div>
</div>
<div class="school__col__right">
<h2 class="school__title">${n.title}</h2>
</div>
</div>
</div>
`
)
.join("");
}
const DATA = [
{
title: "Product 1",
rating: '[ratings id="261"]',
reviews: '[su_post field="comment_count" post_id="261"]',
category: ["A", "B", "C"],
},
{
title: "Product 1",
rating: '[ratings id="261"]',
reviews: '[su_post field="comment_count" post_id="261"]',
category: ["A", "B"],
},
{
title: "Product 1",
rating: '[ratings id="261"]',
reviews: '[su_post field="comment_count" post_id="261"]',
category: ["D"],
},
]
outputGoods(DATA);
<div id="filters">
<div class="country"><h2>Категория</h2>
<select id="category">
<option value="">-- Категория --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div id="goods"></div>