How to use limitToFirst() and limitToLast() to retrieve data in Firebase using JavaScript?

Question

I am working on a web app - building a contact form. I tried using limitToFirst() to retrieve first few records from Firebase using JavaScript but it isn't working. If anyone could help me with it, it would be appreciated!!

The following is my code for retrieving the entire data from 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;

        }
        });
});

} }

This is how my data looks in Firebase :

Answer 1

So I'm trying to work out a more advanced version of this and stumbled upon this question. I think the issue is you don't have how firebase gets/organizes it's data really solid.

This can be done a ton of other ways using things like the snapshot ForEach

but I went ahead and created a simplified version of your code.

The first function is the "Get Data" that accepts a starting key or not..

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

The key here is we setup the query, then build the data object from the results. I got a little fancy with the array operators to do things like map and filter but it shows the power of those.

You could combine it all into one but I went ahead and split the "display" function:

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

And then to kick it all off:

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