javascript - 使用 JavaScript 过滤 Firebase 查询

Question

我的 firebase 数据库的 JSON 如下所示:

{
  "Films" : 
    [
        {
            "Title" : "Rear Window",
            "Actors" : [ "James Stewart", "Grace Kelly", "Raymond Burr" ],
            "Year" : "1954",
            "Writer" : [ "John Michael Hayes (screenplay)", "Cornell Woolrich (short story)" ]
        },
        {
            "Title" : "The Ring",
            "Actors" : [ "Carl Brisson", "Lillian Hall-Davis", "Ian Hunter" ],
            "Year" : "1927",
            "Writer" : [ "Alred Hitchcock" ]
        },
        {
            "Title" : "The Farmer's Wife",
            "Actors" : [ "Jameson Thomas", "Lillian Hall-Davis", "Gordon Harker" ],
            "Year" : "1928",
            "Writer" : [ "1928" ]
        }
    ]
}

我正在根据 firebase 的初始查询构建我的 html，如下所示:

    // Initialize FireBase Database
   firebase.initializeApp(config);

   // Query the root of FireBase
   var query = firebase.database().ref();

   // Get a snapshot of all of the data
   query.once("value")
      .then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
         var childData = childSnapshot.val();
         buildFilms(childData);
      });
   });

   // Build out the films
   function buildFilms(films) {
      for ( i = 0; i < films.length; i ++ ) {
         var numOfActors = films[i].Actors.length,
             filmDiv = document.createElement('div'),
             filmTitle = document.createElement('h1');
         filmTitle.innerHTML = films[i].Title;
         filmDiv.setAttribute("id", "film" + i);
         filmDiv.setAttribute("class", "film");
         document.getElementById("wrapper").appendChild(filmDiv);
         document.getElementById("film" + i).appendChild(filmTitle);
         listActors(films, numOfActors);
         showYear(films);
      }
   }

   // List out Actors per film
   function listActors(films, numOfActors) {
      for ( subindex = 0; subindex < numOfActors; subindex ++ ) {
         var actorTitle = document.createElement('h2');
             actorTitle.innerHTML = films[i].Actors[subindex];
         document.getElementById("film" + i).appendChild(actorTitle);
      }
   }

   // List years per film
   function showYear(films) {
      var yearSpan = document.createElement('h4');
      yearSpan.innerHTML = films[i].Year;
      document.getElementById("film" + i).appendChild(yearSpan);
   }

然后，我想使用基本的 html 文本输入在提交时使用 Firebase 的内置查询重新绘制 dom，如下所示:

function runSearch(e) {
      e.preventDefault();
      var title = $('#title').val().toLowerCase();
      $("#wrapper").empty();
      setTimeout(function() {
         query.once("value")
            .then(function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
               // Need to narrow the films to the matching search input here
               buildFilms(newFilteredData);
            });
         });
      }, 1000)
   }

我不知道如何使用输入按“标题”查询我的 firebase 数据。非常感谢任何帮助。

Answer 1

我希望 firebase 查询 orderBy startAt endAt 能够解决您的需求。

注意:如果您尝试orderBy多个字段，这不会对您有帮助，您必须编写一些其他逻辑来实现多个字段orderBy。

尝试下面的代码片段。它会为您过滤数据!!

希望这对您有帮助!

var title = 'movie';
query
  .orderByValue()
  .startAt(title).endAt(title)
  .on('value', function(snapshot) { 
      var movie = snapshot.val();
      //do whatever you want.
  });

有关查询相关的完整信息，请访问以下链接

https://firebase.google.com/docs/reference/js/firebase.database.Query