88676

Firebase range query

Question:

Im using AngularFire+Firebase and have data at firebase-database.

Im trying to paginate Data with <a href="https://lorenzofox3.github.io/smart-table-website/#section-pagination" rel="nofollow">Smart Table</a>

My problem is that I dont know how to range query without specifying any child i,e fetch records from record # 25 to 35

Below query gives me first 5 records

var queryFIrst = visitRef.startAt().limitToFirst(5); $scope.Visits = $firebaseArray(queryFIrst);

now Im trying to get records next 5,from 6 to 10 and I tried below

var queryFIrst = visitRef.startAt().limitToFirst(5).endAt().limitToFirst(5); $scope.Visits = $firebaseArray(queryFIrst);

but it giving error that startAt and endAt can't be used like this with limit

Answer1:

In general pagination is not a good fit for Firebase's realtime data model/API. You're trying to model a SQL SKIP operator, which won't work with the Firebase Database.

But if you want to model pagination in Firebase, you should think of having an "anchor point".

When you've loaded the first page, the last item on that page becomes the anchor point. When you then want to load the next page, you create a query that starts at the anchor point and load n+1 item.

In pseudo-code (it's real JavaScript, I just didn't run it):

var page1 = visitRef.orderByKey().limitToFirst(5); var anchorKey; page1.on('child_added', function(snapshot) { anchorKey = snapshot.key; // this will always be the last child_added we received });

Now when you want to load the next page of items, you create a new query that starts at the anchor key:

var page2 = visitRef.orderByKey().startAt(anchorKey).limitToFirst(6);

A few things to note here:

<ul><li>You seem to be using an approach from the Firebase 1.x SDK, such as an empty startAt(). While that code may still work, my snippets use the syntax/idiom for the 3.x SDK.</li> <li>For the second page you'll need to load one extra item, since the anchor item is loaded for both pages.</li> <li>If you want to be able to paginate back, you'll also need the anchor key at the start of the page.</li> </ul>

Recommend

  • How to handle Firebase permission denied exception gracefully
  • Angular list detail view with firebase autogenerated id
  • Angularfire Uncaught ReferenceError: Firebase is not defined
  • Draw border edges of the Konvajs container Stage in html
  • Is there a way in Redux Forms to make a form validate from code?
  • cordova plugin installation issue when using node script in hooks folder
  • Linq to SQL order by with Distinct
  • How to retrieve range of data in firebase
  • Firestore order by two fields
  • beginAt, endAt using index instead of priority
  • Android Firebase query data
  • Firebase always returning all the rows
  • setPriority() sometimes don't seem to fire startAt().endAt().on(“child_added”)
  • Rails, Chartkick: Show values on the charts
  • Angular ui.grid infinite scroll is not being called second time onwords
  • Google Analytics API - Filtering via .NET - So Close!
  • Simple firebase v3 data retrieval with angularfire v2
  • Facebook Get User ID From Application Tab
  • multi query and pagination with firestore
  • Dojox/mvc/at model scope
  • Rails routing for has_and_belongs_to_many relationship
  • angularjs - ng-show doesn't update class when $interval triggers
  • IP and domain create different session
  • Process.StartTime Access Denied
  • How to make Javascript generated checkboxes persist?
  • Avoiding dependencies is exploding the number of projects in my VS solution
  • How to exclude files in a custom clean task?
  • UI-GRID column summation on checkbox change
  • Replacing script src using jquery not executed
  • keeping track of nested ng-repeat index's
  • Using an STL Iterator without initialising it
  • R sqldf renaming a field in a select statement
  • Google analytics measurement protocol session timeout and query time limits
  • Available space left on drive - WinAPI - Windows CE
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Updating Dojo provide
  • SAXReader not re-ecape characters
  • How can I set a binding to a Combox in a UserControl?
  • Is it possible to access block's scope in method?
  • bootstrap to use multiple ng-app