JavaScript 过滤来自 Firestore 的数据

Question

我正在为 Firestore 中的数据创建一个简单的过滤器。我的数据库中有 4 个对象，问题是每个过滤都会输出集合中相同的最后一个对象。我相信问题是当我分配 <option> 的值时来自<select>标签...我想存储我从字段中选择的内容，然后使用该属性从数据库中进行过滤。

我为此提供了 HTML 和 JavaScript 代码。

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>

Answer 1

您无法将要排序的字段及其 desc 修饰符以单个字符串形式传递给 API。您需要将它们作为单独的参数传递。

类似于:

  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());
      });
  })