如何使用limitToFirst（）和limitToLast（）使用JavaScript在Firebase中检索数据？

Question

我正在开发一个网络应用程序 - 构建联系表单。我尝试使用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如何获取/组织它的数据真的很扎实。

使用snapshot 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);
})