элемент select не возвращает при выборе "все" полный массив элементов JS
Проблема в коде такова: я не могу придумать, как вернуть все элементы, когда выбрана опция "все" Буду очень признателен за любую помощь
<div class="filter-box">
<div class="select-box">
<label class="filter-label">Категория</label>
<select id="cats" class="select-control">
<option value="0">Все</option>
<option value="1">Завтраки</option>
<option value="2">Первые блюда</option>
<option value="3">Гарниры</option>
</select>
</div>
<div class="price-select-box">
<label class="filter-label">Цена</label>
<select id="price" class="select-control">
<option value="0">Все</option>
<option value="30">До 30 грн</option>
<option value="50">До 50 грн</option>
<option value="100">До 100 грн</option>
<option value="150">До 150 грн</option>
</select>
</div>
</div>
<div id="products" class="products-box grid-box "> </div>
const products = document.getElementById("products");
const catsSel = document.getElementById("cats");
const priceSel = document.getElementById("price");
document.addEventListener('change', handleChange)
function handleChange(e) {
const {target} = e;
if(target.id !== "cats" && target.id !== "price") {
return;
}
const selectedCat = parseInt(catsSel.value)
const selectedPrice = parseInt(priceSel.value)
const data = defaultData.products.filter((item) => {
return (
(selectedCat === -1 || item.cid === selectedCat) &&
(selectedPrice === -1 || item.price <= selectedPrice)
)
})
if (data.length !== 0) { render(data) }
}
function render(data) { document.getElementById("products").innerHTML += data[0].i; }
var defaultData = {
cats: [
{ id: 1, title: "Все" },
{ id: 2, title: "Завтраки" },
{ id: 3, title: "Первые блюда" },
{ id: 4, title: "Гарниры" }
],
products: [
{
id: 1,
cid: 1,
title: "Овсяная каша с фруктами",
im: "<img class='img-fluid' src='i/im1.jpg'>",
price: 30
},
{
id: 2,
cid: 1,
title: "Яичница глазунья с овощами на сковородке",
im: "<img class='img-fluid' src='i/im2.jpg'>",
price: 25
},
{
id: 3,
cid: 1,
title: "Сет азербайджанский завтрак",
im: "<img class='img-fluid' src='i/im3.jpg'>",
price: 10
},
{
id: 4,
cid: 4,
title: "Яичница с помидорами по-бакински",
im: "<img class='img-fluid' src='i/im4.jpg'>",
price: 28
},
{ id: 5, cid: 1, title: "Сырники со сметаной", im: "<img class='img-fluid' src='i/im5.jpg'>", price: 50},
{ id: 6, cid: 2, title: "Шпинатный крем-суп", im: "<img class='img-fluid' src='i/im6.jpg'>", price: 60},
{ id: 7, cid: 2, title: "Суп Пити", im: "<img class='img-fluid' src='i/im7.jpg'>", price: 118},
{ id: 8, cid: 2, title: "Борщ украинский", im: "<img class='img-fluid' src='i/im8.jpg'>", price: 68},
{ id: 9, cid: 2, title: "Суп Кюфта Бозбаш", im: "<img class='img-fluid' src='i/im9.jpg'>", price: 145},
{
id: 10,
cid: 2,
title: "Суп Соютма из ягненка",
im: "<img class='img-fluid' src='i/im10.jpg'>",
price: 150
},
{ id: 11, cid: 3, title: "Картофель фри", im: "<img class='img-fluid' src='i/im11.jpg'>", price: 35 },
{
id: 12,
cid: 3,
title: "Картофель по-домашнему",
im: "<img class='img-fluid' src='i/im12.jpg'>",
price: 45
}
],
};
var renderCats = defaultData.cats.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {});
полный пример не работающего кода ) https://codesandbox.io/s/affectionate-albattani-s0snm?file=/src/index.js
Ответы (1 шт):
Автор решения: yar85
→ Ссылка
Выражения в коллбэке filter неправильные - предполагается value <= 0 || .... вместо value === -1 || .....
const defaultData = getDefaultData(),
products = document.getElementById("products"),
catsSel = document.getElementById("cats"),
priceSel = document.getElementById("price");
document.addEventListener('change', handleChange);
render(defaultData.products);
function handleChange({ target }) {
if ((target.id !== 'cats') && (target.id !== 'price')) return;
const selectedCat = +catsSel.value,
selectedPrice = +priceSel.value;
render(defaultData.products.filter(item => (
(selectedCat <= 0 || item.cid === selectedCat) &&
(selectedPrice <= 0 || item.price <= selectedPrice)
)));
}
function render(data) {
products.innerHTML = data.map(item => `<div>
<span class="title">${item.title}</span>
${item.im}
<span class="price">${item.price}</span>
</div>`).join('');
}
function getDefaultData() {
return {
cats: [
{ id: 1, title: "Все" },
{ id: 2, title: "Завтраки" },
{ id: 3, title: "Первые блюда" },
{ id: 4, title: "Гарниры" },
],
products: [
{
id: 1,
cid: 1,
title: "Овсяная каша с фруктами",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=1">',
price: 30
}, {
id: 2,
cid: 1,
title: "Яичница глазунья с овощами на сковородке",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=2">',
price: 25
}, {
id: 3,
cid: 1,
title: "Сет азербайджанский завтрак",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=3">',
price: 10
}, {
id: 4,
cid: 4,
title: "Яичница с помидорами по-бакински",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=4">',
price: 28
}, {
id: 5,
cid: 1,
title: "Сырники со сметаной",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=5">',
price: 50
}, {
id: 6,
cid: 2,
title: "Шпинатный крем-суп",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=6">',
price: 60
}, {
id: 7,
cid: 2,
title: "Суп Пити",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=7">',
price: 118
}, {
id: 8,
cid: 2,
title: "Борщ украинский",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=8">',
price: 68
}, {
id: 9,
cid: 2,
title: "Суп Кюфта Бозбаш",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=9">',
price: 145
}, {
id: 10,
cid: 2,
title: "Суп Соютма из ягненка",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=10">',
price: 150
}, {
id: 11,
cid: 3,
title: "Картофель фри",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=11">',
price: 35
}, {
id: 12,
cid: 3,
title: "Картофель по-домашнему",
im: '<img class="img-fluid" src="https://loremflickr.com/64/64/cat?r=12">',
price: 45
},
],
};
}#products { margin: 1rem 0; }
#products > div { display: flex; align-items: center; max-width: 500px; padding: 0.2rem; border: 1px solid #ccc; }
#products > div + div { border-top: 0; }
#products > div .title { flex: 1 1; }
#products > div .price { min-width: 6ch; text-align: right; }
#products > div .price::after { content: '?'; }<div class="filter-box">
<div class="select-box">
<label class="filter-label">Категория</label>
<select id="cats" class="select-control">
<option value="0">Все</option>
<option value="1">Завтраки</option>
<option value="2">Первые блюда</option>
<option value="3">Гарниры</option>
</select>
</div>
<div class="price-select-box">
<label class="filter-label">Цена</label>
<select id="price" class="select-control">
<option value="0">Все</option>
<option value="30">До 30 ?</option>
<option value="50">До 50 ?</option>
<option value="100">До 100 ?</option>
<option value="150">До 150 ?</option>
</select>
</div>
</div>
<div id="products" class="products-box grid-box"></div>