Алгоритм фильтрации товаров

document.getElementById('filter_form') 
  .addEventListener('input', function(event) { 
    const formData = new FormData(this); 
 
    log(formData); 
 
    /** 
     * Пример отправки FormData. 
    const xhr = new XMLHttpRequest(); 
 
    xhr.open('POST', API_URL, true); 
    xhr.onreadystatechange = function() { 
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { 
        const response = JSON.parse(xhr.responseText); 
 
        // Рендеринг списка товаров. 
        console.log(response); 
      } 
    } 
 
    xhr.send(formData);*/ 
  }); 
 
const log = function logToConsoleforDemo(data) { 
  console.clear(); 
  console.log('Эти данные будут отправлены:'); 
 
  for (let pair of data.entries()) { 
    console.log(...pair); 
  } 
};

#app { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.sidebar { 
  flex: 0 0 288px; 
  padding: 18px; 
  padding-bottom: 188px; 
} 
 
label { 
  display: block; 
}

<div id="app"> 
  <aside class="sidebar"> 
    <form id="filter_form" action="" method="post"> 
      <section> 
        <h3>Страна производства</h3> 
        <label> 
              <input type="checkbox" name="country[]" value="belarus" /> 
              <span class="checkbox"></span> 
              <span class="label">Беларусь</span> 
            </label> 
        <label> 
              <input type="checkbox" name="country[]" value="russia" /> 
              <span class="checkbox"></span> 
              <span class="label">Россия</span> 
            </label> 
        <label> 
              <input type="checkbox" name="country[]" value="ukraine" /> 
              <span class="checkbox"></span> 
              <span class="label">Украина</span> 
            </label> 
        <label> 
              <input type="checkbox" name="country[]" value="netherlands" /> 
              <span class="checkbox"></span> 
              <span class="label">Нидерланды</span> 
            </label> 
        <label> 
              <input type="checkbox" name="country[]" value="germany" /> 
              <span class="checkbox"></span> 
              <span class="label">Германия</span> 
            </label> 
      </section> 
      <section> 
        <h3>Цена</h3> 
        <div class="price-range"> 
          <input type="number" name="price[]" placeholder="от: " min="100" value="100" /> 
          <input type="number" name="price[]" placeholder="до: " min="1000" value="1000" /> 
        </div> 
      </section> 
      <section> 
        <h3>Количество в упаковке</h3> 
        <select name="quantity-per-pack"> 
          <option value="1">1</option> 
          <option value="4">4</option> 
          <option value="8">8</option> 
        </select> 
      </section> 
      <section> 
        <h3>Наличие втулки</h3> 
        <div class="radio"> 
          <label> 
                <input type="radio" name="thimble" value="1" /> 
                <span class="radiobutton"></span> 
                <span class="label">Да</span> 
              </label> 
          <label> 
                <input type="radio" name="thimble" value="0" /> 
                <span class="radiobutton"></span> 
                <span class="label">Нет</span> 
              </label> 
        </div> 
      </section> 
    </form> 
  </aside> 
  <main class="main"></main> 
</div>

// Массив товаров. 
const products = [{ 
  "name": "Первый", 
  "price": "100", 
  "country": "russia", 
  "thimble": "true", 
}, { 
  "name": "Второй", 
  "price": "200", 
  "country": "belarus", 
  "thimble": "true", 
}, { 
  "name": "Третий", 
  "price": "1000", 
  "country": "russia", 
  "thimble": "false", 
}, { 
  "name": "Четвертый", 
  "price": "800", 
  "country": "netherlands", 
  "thimble": "false", 
}]; 
 
// Предположим, что это фильтр с фронта. 
const query = { 
  "country": [ 
    "netherlands", 
    "belarus" 
  ], 
  "thimble": "false" 
}; 
 
// Ключи из фильтра, по ним будет фильтрация. 
const queryKeys = Object.keys(query); 
 
// Здесь желательно не забывать о типах данных. 
// ... code. 
 
// Фильтрация массива объектов по нескольким ключам. 
const filtered = products.filter((product) => { 
  // При помощи метода `every` проверяем, 
  // чтобы значения каждого ключа совпадали 
  // со значениями ключей в товаре. 
  return queryKeys.every((key) => { 
    // Если несколько значений у ключа. 
    // В нашем случае это массив `country` с фронта. 
    if (Array.isArray(query[key])) { 
      return query[key].includes(product[key]); 
    } 
 
    return product[key] == query[key]; 
  }); 
}); 
 
console.log(filtered);