Javascript filtering data from Firestore

user_12051965 0
Viewed 933

I am working at a simple filter for my data from Firestore. I have 4 objects in my database and the problem is each filtering outputs the same last object from the collection. I believe the problem is when I assign the values of <option> from <select> tag... I wanted to store what I choose from the field and then use that attribute to filter from the database.

I have provided HTML and JavaScript code for this.

let applyButton = document.getElementById("apply-id");

let categoryType = document.getElementById("select-by-type");
let categoryTypeOption = categoryType.getElementsByTagName("option")[categoryType.selectedIndex]
                     .getAttribute("value");
                     
let categoryServer = document.getElementById("select-by-server");
let categoryServerOption = categoryServer.getElementsByTagName("option")[categoryServer.selectedIndex]
                     .getAttribute("value");
                     
let categoryPrice = document.getElementById("select-by-price");
let categoryPriceOption = categoryPrice.getElementsByTagName("option")[categoryPrice.selectedIndex]
                     .getAttribute("value");


    applyButton.addEventListener("click", function() {
      if (categoryPriceOption == "high") {
        categoryPriceOption = "'price', 'desc'";
      } else {
        categoryPriceOption = "price"; 
      }
      firebase.firestore().collection("categories")
        .where("categoryType", "==", `${categoryTypeOption}`)
        .where("categoryServer", "==", `${categoryServerOption}`)
        .orderBy(categoryPriceOption)
        .get()
        .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
              console.log(doc.id, " => ", doc.data());
          });
      })
    });
<div id="filter-modal-id" class="modal-general">
          <div class="main-intro-to-verification" style="border: 0;;">
            Filter
          </div>

          <div class="verification-main-input-div" style="margin-top: 0;">
            <p class="verification-main-text">By type</p>

            <div class="drop-dawn-add-category-list">
              <select id="select-by-type" name="cars" class="drop-dawn-add-ctegory-select">
                <option value="Clothing">Clothing</option>
                <option value="Shoes">Shoes</option>
                <option value="Face">Face</option>
                <option value="Body">Body</option>
              </select>
            </div>
          </div>

          <div class="verification-main-input-div">
            <p class="verification-main-text">By location</p>

            <div class="drop-dawn-add-game-list">
              <select id="select-by-server" name="cars" class="drop-dawn-add-category-select">
                <option value="EU">EU</option>
                <option value="USA">USA</option>
              </select>
            </div>
          </div>

          <div class="verification-main-input-div">
            <p class="verification-main-text">By price</p>

            <div class="drop-dawn-add-category-list">
              <select id="select-by-price" name="cars" class="drop-dawn-add-category-select">
                <option value="high">High</option>
                <option value="low">Low</option>
              </select>
            </div>
          </div>


          <div class="main-order-action-buttons" style="margin-top: 25px ; border-bottom: 0;">
            <div id="apply-id" class="all-order-action-buttons">Apply</div>
            <div id="cancel-id" class="all-order-action-buttons">Cancel</div>
        </div>
    </div>

google-cloud-firestore firebase javascript
1 Answers

You can't pass the field to sort on and its desc modifier in a single string to the API. You'll need to pass them as separate parameters.

Something like:

  let query = firebase.firestore().collection("categories")
    .where("categoryType", "==", categoryTypeOption)
    .where("categoryServer", "==", categoryServerOption);
  if (categoryPriceOption == "high") {
    query = query.orderBy('price', 'desc');
  } else {
    query = query.orderBy('price');
  }
  query
    .get()
    .then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          console.log(doc.id, " => ", doc.data());
      });
  })
user_2091030
Related