JS在选择“все”选项时需要返回所有值

Question

代码中的问题是：我想不出如何在选择“все”选项时返回所有元素 如果有任何帮助，我将不胜感激

 <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><!-- /.select-box -->
                <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><!-- /.price-select-box -->
            </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) 
  )
})

render(data)

}


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

只有一个错误，由于某种原因，该变量在数据文档中不可见

Answer 1

应为 0（“все” 选项的值）

    (selectedCat === 0
    (selectedPrice === 0

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 === 0 || item.cid === selectedCat) &&
        (selectedPrice === 0 || item.price <= selectedPrice) 
      )
    })

    if (data.length !== 0) { render(data) }
    
    }

function render(data) {
  let output = '';
  for (const item of data) {
    output += item.im;
  }
  document.getElementById("render-box").innerHTML = output;
}

    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;
      }, {});

<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><!-- /.select-box -->
                    <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><!-- /.price-select-box -->
                </div><!-- /filter-box-->
                <div id="render-box"></div>