使用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

这应该工作：

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

   // Query the Films node under it
   var query = root.child("Films");

   // Get a snapshot containing the matching children from under Films
   query.once("value")
      .then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        console.log(childSnapshot.val().Title);
      });
   });

Answer 2

希望orderBy startAt endAt查询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