Как запросить несколько фильтров на основе ценовых входов? javascript - веб - камин

Question

Я создаю сайт по недвижимости и собираюсь завершить sh это. Тем не менее, я застрял на фильтрации свойств на основе полей ввода пользователя. Я пытаюсь сейчас только с входами ценового диапазона, но это не работает. И нет ошибки в консоли. это код для получения данных из базы данных и фильтрации:

const searchMin = Number(document.getElementById('min').value); 
const searchMax = Number(document.getElementById('max').value);
// get data from the cloud Database and display on the home page
db.collection('properties')
.where("price", ">=", searchMin)
.where("price", "<=", searchMax)
.onSnapshot(snapshot => {
    setupProp(snapshot.docs)

});

А вот где я отображаю их на домашней странице:

// Displaying the properties to the HomePage
const setupProp = data => {
  let html = '';
  data.forEach(doc => {
    const info = doc.data();
    let li = `
    <div class="col s12 l4 items">
      <div class="card" style="height: 407px;">
        <div class="card-image">
          <a href="property.html?${doc.id}">
          <img src="${info.image[0]}" style="height: 228px;"></a>
          <a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
        </div>
        <div class="card-content">
          <span><b class="house-title">${info.title}</b></span><br>
          <span><b class="blue-text price">${info.price}</b> &#36;</span><br>
          <span class="material-icons blue-text">room</span>
          <span><b class="city">${info.city}</b></span><br>
          <span class="material-icons blue-text">single_bed</span>
          <span><b class="rooms">${info.rooms}</b> rooms</span>
        </div>
      </div>
  </div>
    `;

    html += li

    showingProp.innerHTML = html; 
  })
}

Answer 1

Если кому интересно, как я решил эту проблему. Ниже код:

let state;
 // get data from the cloud Database and display it on the home page
db.collection("properties").onSnapshot((snapshot) => {
  setupProp(snapshot.docs);
  state = snapshot.docs;


});

А вот фильтр:

const filter = (items) => {
  const searchMin = Number(document.getElementById("min").value); // Min price search tap
  const searchMax = Number(document.getElementById("max").value); // Max price search tap
  const rentSale = document.querySelector(".rent-sale").value; // Rent/Sale search tap
  const citySelected = document.querySelector(".all-cities").selectedOptions[0].innerHTML; // City search tap
  const minRooms = document.querySelector(".min-rooms").value; // Min rooms search tap
  const maxRooms = document.querySelector(".max-rooms").value; // Max rooms search tap

  const itemsFilter = items
    .filter((item) => item.data().type === rentSale || rentSale === "0")
    .filter((item) => item.data().price > searchMin)
    .filter((item) => item.data().price <= searchMax || searchMax == 0)
    .filter((item) => item.data().city === citySelected || citySelected == "Choose...")
    .filter((item) => item.data().rooms >= minRooms || minRooms == 0)
    .filter((item) => item.data().rooms <= maxRooms || maxRooms == 0);

    return itemsFilter;
};

const filterForm = document.getElementById("filter-form");
filterForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const itemsFitler = filter(state);
  setupProp(itemsFitler);
  return false;
});