Фильтрация товаров с массивом в date

Question

У меня есть товары и фильтр товаров. Данные товаров храняться в DATA. Есть товар (Рубашка №5) у которого size ввиде массива, в котором несколько размеров.
Когда я выбираю фильтр size "S" у меня отображаться только один товар (Рубашка №1), но нужно чтобы отображался ещё товар "Рубашка №5", ведь у него в массиве есть рамзмер "S".

Как это сделать?

Что у меня есть сейчас:

const filters = document.querySelector('#filters');

filters.addEventListener('input', filterGoods);

function filterGoods() {
  const
    country = filters.querySelector('#country').value,
    sizes = [...filters.querySelectorAll('#size input:checked')].map(n => n.value),
    priceMin = document.querySelector('#price-min').value,
    priceMax = document.querySelector('#price-max').value;

  outputGoods(DATA.filter(n => (
    (!country || n.country === country) &&
    (!sizes.length || sizes.includes(n.size)) &&
    (!priceMin || priceMin <= n.cost) &&
    (!priceMax || priceMax >= n.cost)
  )));
}

function outputGoods(goods) {
  document.getElementById('goods').innerHTML = goods.map(n => `
    <div class="single-goods">
      <h3>${n.name}</h3>
      <img src="${n.image}">
      <p>Цена: ${n.cost}</p>
      <button class="add-to-cart" data-art="${n.name}">Купить</button>
    </div>
  `).join('');
}

const DATA = [{
    "sex": "male",
    "name": "Рубашка №1",
    "cost": 1000,
    "country": "france",
    "image": "http://i.piccy.info/i9/9921ed03bf45751d45447b15e78be751/1566814909/19890/1334636/1.jpg",
    "size": "S"
  },
  {
    "sex": "male",
    "name": "Рубашка №2",
    "cost": 1200,
    "country": "turkey",
    "image": "http://i.piccy.info/i9/acc4df9b14e48a42d7cd353e923673e7/1566814962/22015/1334636/2.jpg",
    "size": "M"
  },
  {
    "sex": "male",
    "name": "Рубашка №3",
    "cost": 1700,
    "country": "china",
    "image": "http://i.piccy.info/i9/174610be67bfea39f99c956885ae3786/1566815027/25896/1334636/3.jpg",
    "size": "L"
  },
  {
    "sex": "male",
    "name": "Рубашка №4",
    "cost": 2000,
    "country": "turkey",
    "image": "http://i.piccy.info/i9/e2e5c6cb274121b9898b7d45a085130f/1566815049/29582/1334636/4.jpg",
    "size": "XL"
  },
  {
    "sex": "male",
    "name": "Рубашка №5",
    "cost": 2000,
    "country": "turkey",
    "image": "http://i.piccy.info/i9/e2e5c6cb274121b9898b7d45a085130f/1566815049/29582/1334636/4.jpg",
    "size": ["XL", "L", "S"],
  },
];

outputGoods(DATA);

#filters {
  border: 1px solid black;
  float: left;
  margin: 0;
}

.price-input { float: left; }

.input-text { width: 50px; }

.single-goods {
  border: 1px solid black;
  margin: 10px;
  float: left;
  text-align: center;
}

.single-goods img { width: 70px; }

<div id="filters">
  <div class="country">
    <h2>Country</h2>
    <select id="country">
      <option value="">-- Country --</option>
      <option value="turkey">Turkey</option>
      <option value="china">China</option>
      <option value="france">France</option>
      <option value="italy">Italy</option>
    </select>
  </div>

  <div class="size">
    <h2>Size</h2>
    <div id="size">
      <label><input type="checkbox" class="btn" value="S">S</label><br>
      <label><input type="checkbox" class="btn" value="M">M</label><br>
      <label><input type="checkbox" class="btn" value="L">L</label><br>
      <label><input type="checkbox" class="btn" value="XL">XL</label><br>
    </div>
  </div>

  <div class="price">
    <h2>Price</h2>
    <div class="price-input">
      <input class="input-text" type="text" value="" id="price-min">&nbsp;-&nbsp;
    </div>
    <div class="price-input">
      <input class="input-text" type="text" value="" id="price-max">&nbsp;usd&nbsp;
    </div>
  </div>
</div>

<div id="goods"></div>

Answer 1

const DATA = [{
    "sex": "male",
    "name": "Рубашка №1",
    "cost": 1000,
    "country": "france",
    "image": "http://i.piccy.info/i9/9921ed03bf45751d45447b15e78be751/1566814909/19890/1334636/1.jpg",
    "size": ["S"] // !!!
  },

Вам нужно проверять на непустое пересечение массивов sizes и n.size, а не на sizes.includes(n.size):

(!sizes.length || sizes.filter(s => n.size.includes(s)).length) &&

БЛОГ НА HUSL

Фильтрация товаров с массивом в date

Ответы (1 шт):