Как реализовать фильтрацию товаров на чистом JS?

Question

[petrro]

Что на данный момент у меня есть:
1) я сверстал фильтры:

• а) фильтр по списку
  
• б) фильтр по чекбоксам
  
• в) фильтр по цене с ползунком и инпутами
  

2) есть файл json где хранятся четыре товары (объекты)
3) есть JS файл который выводит эти товары на страницу

Вот как сейчас это выглядит:


Мне нужно, чтобы в начале отображались все товары, а уже когда я буду ставить галочки, прописывать цену или выбирать из списка категорию, отображались только выбранные товары.

А вот код того что есть:
HTML:

<div id="filters">
     <div class="country"><h2>Country</h2>
       <select id="country">
       <option value="hide">-- 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="myDropdown">
        <input type="checkbox" class="btn" value="S">S<br>
        <input type="checkbox" class="btn" value="M"> M<br>
        <input type="checkbox" class="btn" value="L"> L<br>
        <input type="checkbox" class="btn" value="XL"> XL<br>
      </div>
      </div>
      
     <div class="price"><h2>Price</h2>
       <div class="price-input"><input class="input-text" type="text"  value="">&nbsp;-&nbsp;</div>
       <div class="price-input"><input class="input-text" type="text"  value="">&nbsp;usd&nbsp;</div>
       <button id="submitprice" type="submit">OK</button>
          <input type="range" min="1" max="100" value="50">
    </div>
</div>
           
<div id="goods"></div>

<script>var sex = 'male'</script>

JS:

document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();
});

function loadGoods() {
    $.getJSON('goods.json', function (data) {
        var out = '';
        for (var key in data){
            if (data[key]['sex'] != sex) { continue; } 
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
         document.getElementById('goods').innerHTML = out; 
    });
}

JSON:

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

СSS:

#filters{
    width: 200px;
    height: 800px;
    border: 1px solid black;
    float:left;
    margin: 0;
}
.price-input{
    float:left;
}
.input-text{
    width: 50px;
   
}
.single-goods {
    width: 280px;
    height: 530px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}

Answer 1

[0xD34F]

Данные - вместо объекта сделайте массив, так будет проще работать.

Когда данные получили - сохраните их (ну типа переменная какая-то, чтобы они у вас всегда были под рукой).

Сделайте функцию, которая будет выводить список товаров - но не весь, а те, что ей будут переданы.

Сделайте функцию, которая будет осуществлять фильтрацию - получает значения из фильтров, отбирает соответствующие элементы из массива, результат передаёт в функцию вывода товаров.

На блок с фильтрами вешаете функцию фильтрации в качестве обработчика событий, возникающих после взаимодействия пользователя с фильтрами.

Всё.

Comments

[petrro]

Спасибо большое! Интересный подход к фильтрации товаров. Но мне нужно как раз таки чтобы объекты были в файле json и выводились на страницу также с него, у меня кроме фильтра достаточно большой JS код еще есть, который добавляет товары в мини-корзину, а еще у меня две страницы - женские товары и мужские и в зависимости от того какая страница открыта отражаются определенные товары. Как реализовать это все но с товарами которые хранятся в json?

напишу код весь для понимания:

var cart = {}; 


document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();
  checkCart();       
  showMiniCart();
});

function loadGoods() {
    
    $.getJSON('goods.json', function (data) {
        
        var out = '';
        for (var key in data){
            if (data[key]['sex'] != sex) { continue; }  /*отображение товара в зависимости от того какая html страница открыта*/
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
         document.getElementById('goods').innerHTML = out; 
         document.querySelectorAll('button.add-to-cart').forEach(function(but) {
           but.addEventListener("click",addToCart);
})
    });
}

function addToCart() {                  // добавляю товар в мини корзину
   var articul = this.getAttribute('data-art');   
    if (cart[articul]!=undefined) {
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
   
    showMiniCart();
}

function checkCart(){
    if ( localStorage.getItem('cart') != null) {
        cart = JSON.parse (localStorage.getItem('cart'));
    }
}

function showMiniCart(){             //отображаю мини-корзину
    var out ='';
    for (var w in cart){
        out += w + ' --- '+cart[w]+'<br>';
    }
    out+='<br><a href="cart.html">Корзина</a>';
    document.getElementById('mini-cart').innerHTML = out;     
}

Есть еще файл cart.js он добавляет все то что я добавил в мини-корзину на отдельную html страницу.

[0xD34F]

petrro,

мне нужно как раз таки чтобы объекты были в файле json

Источник данных к сути вашего вопроса не имеет отношения, ни малейшего. Ещё раз: данные загрузили - про json забыли, работаете с полученными объектами.

[kganin]

0xD34F,
как бы сделать такую же сортировку, только если в свойстве size не просто элемент строчный, а массив из строчных элементов
например 'size': ['s', 'xl']

(!sizes.length || sizes.some(el => n.size.includes(el))) если вот так написать, это верно будет?

[0xD34F]

kganin, зачем спрашивать? - Вы напишите и посмотрите.

[Niksak]

Елки палки, jsfiddle уже не грузит в наших реалиях, не сохранился код?)

[0xD34F]

Niksak,

HTML

<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>

JS

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"
  }
];

outputGoods(DATA);

CSS

#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;
}

[Niksak]

0xD34F, пасиба!

[Norton_bike]

0xD34F, не подскажете как сделать сортировку если в свойстве size будет масив элементов? долго голову ламаю, не могу понять.