如何使用limitToFirst（）和limitToLast（）使用JavaScript在Firebase中檢索數據？

Question

我正在開發一個Web應用程序 - 構建一個聯系表單。 我嘗試使用limitToFirst（）從使用JavaScript從Firebase檢索前幾條記錄，但它無法正常工作。 如果有人可以幫助我，我將不勝感激！

以下是我從Firebase 檢索整個數據的代碼：

    function getData(data)
        {

            var Persons = data.val();
            var keys = Object.keys(Persons); //getting the unique key id for each data

            var start = 0;
            var end = 2;
            var total="";

            for(var i = 0; i < keys.length; i++) /*Using for loop to retrieve each child data of a key*/
            {
                  var k = keys[i];
                  var fname = Persons[k].fname;
                  var lname = Persons[k].lname;
                  var mno = Persons[k].mno;
                  var email = Persons[k].email;
                  var image = Persons[k].image;
                  var visible = Persons[k].visible;



             firebase.database().ref('Persons').child(k).on('value', function(snapshot) {
                var x = snapshot.val().visible;  //checking the visible flag
                var personRef=firebase.database().ref().child("Persons");

       personRef.orderByKey().startAt(start).limitToFirst(end).once('value', function(snapshot)   //Retrieving first few records from Firebase 
   { 
        console.log(snapshot);      

        if(x==true)  //displays the data whose visible flag is "true"
        {


          total+="<div><br/></div<div><b>KEY ID:  </b><h1>"+k+"</h1></div><div><br/></div><div><img src="+image+" alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>"+fname+"</div><div><b>LAST NAME : </b>"+lname+"</div><div><b>MOBILE NO : </b>"+mno+"</div><div><b>EMAIL : </b>"+email+"</div><div><br/><b><hr><hr></b></div>";     //this is displaying the data using HTML commands

          document.getElementById('total').innerHTML=total;
          start+=end;

        }
        });
});

}}

這就是我在Firebase中查看數據的方式：

Answer 1

所以我試圖找出一個更高級的版本並偶然發現這個問題。 我認為問題是你沒有firebase如何獲取/組織它的數據真的很穩固。

使用快照ForEach等功能可以通過其他方式完成

但我繼續創建了代碼的簡化版本。

第一個函數是“獲取數據”，它接受或不接受啟動鍵。

function getData(startKey) {
  var itemCount = 5;
  var peopleArray = [];
  // Get the data from firebase for all people
  var allPeopleRef = firebase.database().ref('/people').orderByKey();

  // if we pass a start key we can change up to only get the ones AFTER this key
  if (startKey) allPeopleRef = allPeopleRef.startAt(startKey);

  // return a promise to make sure we get the data right

  return new Promise(function (resolve, reject) {

    // Limit the results
    allPeopleRef.limitToFirst(itemCount).once('value').then(function(snapshot) {
      var people = snapshot.val()
      if (people) {
        // Get as an array
        peopleArray = Object.keys(people).map(function(key) {
          // add the key to the object
          people[key].key = key;
          return people[key];
        })
        // filter for visible
        .filter(function(person) {
          return person.visible;
        });
        // finish the promise
        resolve(peopleArray);
      } else reject('No People Found');
    });
  });
}

這里的關鍵是我們設置查詢，然后從結果中構建數據對象。 我對陣列操作員有點喜歡做地圖和濾鏡這樣的事情，但它顯示了那些的力量。

您可以將它們組合成一個但我繼續並拆分“顯示”功能：

function displayData(data) {
  var total = "";
  data.forEach(function(person) {
      total+="<div><br/></div<div><b>KEY ID:  </b><h1>"+person.key+"</h1></div><div><br/></div><div><img src="+person.image+" alt=NoProfilePic class=imgsrc></div><div><b>FIRST NAME : </b>"+person.fname+"</div><div><b>LAST NAME : </b>"+person.lname+"</div><div><b>MOBILE NO : </b>"+person.mno+"</div><div><b>EMAIL : </b>"+person.email+"</div><div><br/><b><hr><hr></b></div>";
  })
document.getElementById('total').innerHTML=total;
});

然后全力以赴：

// Kick it all off
getData().then(function(people){
  displayData(people);
})