text: Last updated on September 30th, 2017 |
  Introduction
  Pulling lists of data from Firebase is nice, you can retrieve your stored data whenever you want, but what if you don’t want all of it?
  What happens when you want to just get certain records, like only the people over 40 because you’re giving a talk in possible schools for their children?
  For that you have to learn about how to query data in Firebase, don’t worry, it might sound intimidating, but it’s pretty easy since Firebase already created the querying functions for us, we just need to use them 🙂
  Make sure to get the code directly from Github so you can follow along with the post:.
  Building the app
  Do you know how to create and configure a new Ionic + Firebase app? If you don’t, check out this post before, if you do, join me while we go through sorting data with AngularFire2
  The first thing we’ll need is a bit of introduction to what kind of data we’re gonna sort.
  I created a dummy data node on my Firebase app that’s basically a list of people with random attributes.
  Today we’ll do 2 different queries, we’re gonna query people with a certain eye color, to test the equality query and we’re going to pull people over a certain age, to make sure we understand how to query greater than values.
  The first thing we’ll do is to pull the entire list of people from Firebase, so we can query against that list.
  For that open your
  home.ts file and import AngularFire2:
  import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
  We’re also importing
  FirebaseListObservable since we’re going to be working with a list of data and AF2 handles that as an observable.
  Now we’ll add the
  people variable so we can reference it in our html and inject AF2 in the class constructor:
  public people: FirebaseListObservable<any>; constructor(public navCtrl: NavController, public afDatabase: AngularFireDatabase) { this.people = afDatabase.list('/random'); }
  That is creating a database reference in a node called
  random (I know, bad name for a node) that has our list of people, then it assigns it to
  people.
  Now we’re going to display that data in the
  home.html file, so we can see that there’s already some data there to play with:
  <ion-content> <ion-list> <ion-item * <ion-avatar item-left> <img [src]="person.picture"> </ion-avatar> <h2>{{ person.name }}</h2> <p> AGE: {{ person.age }} </p> <p> Eye Color: {{ person.eyeColor }} </p> </ion-item> </ion-list> </ion-content>
  We’re creating a list that’s going to loop through the
  people list and show us a picture, their names, age, and eye color.
  Querying against a specific value
  The first query we’ll do is an equality one, we’re going to tell AngularFire2 to bring only the people who match the selected eye color (blue or green).
  For this, we’ll first build a little select function inside our
  <ion-content> and tell it to call a
  pickEyeColor() function on value change:
  <ion-list> <ion-item> <ion-label>Eye Color</ion-label> <ion-select [(ngModel)]="eyeColor" (ionChange)="pickEyeColor(eyeColor)"> <ion-optionBlue</ion-option> <ion-optionGreen</ion-option> </ion-select> </ion-item> </ion-list>
  That’s just your regular Ionic 2 select component, we’re giving it to options
  blue or
  green and we’re adding an
  (ionChange) function that calls
  pickEyeColor functions and pass it the color every time that value changes.
  Now, we’ll create that function on our
  home.ts file:
  pickEyeColor(eyeColor: string){ this.people = this.afDatabase.list('random', { query: { orderByChild: 'eyeColor', equalTo: eyeColor } }); }
  We’re just assigning
  people to a new Firebase reference, we’re passing the same
  /random reference, but we’re also passing a new object.
  query, how it works is that it tells AF2 that you’d like to run a query against that node, and AF2 translates that into something the SDK can understand.
  In this case, we’re telling it we want to
  orderByChild and we’re giving it the value of
  eyeColor, what this does is that it’s going to look in our list for a property called
  eyeColor in every child node inside
  /random
  Then we’re telling it that the property
  eyeColor needs to be equal to whatever it is we’re passing as the
  eyeColor parameter (yeah, I’m not the best at naming things)
  Querying greater than numeric values
  Now that we got that equality query done, we’re going to do something a bit different, we’re going to query people with a certain age, but instead of telling AF2 to pull everyone who is 20 years old, we’re going to tell it to bring people over that age, meaning it will query against everyone who is the age we pass or older.
  We need to create a new select on the
  home.html file, just like the one before:
  <ion-list> <ion-item> <ion-label>Over what age?</ion-label> <ion-select [(ngModel)]="age" (ionChange)="pickOlderPeople(age)"> <ion-option value=30>30</ion-option> <ion-option value=40>40</ion-option> </ion-select> </ion-item> </ion-list>
  This time we’re calling the
  pickOlderPeople() function and we’re passing them an age, 30 or 40 years old.
  We’re doing it like this but you can create a regular input field and type in the age that you want to query against.
  Now, we need to create the
  pickOlderPeople() function in out
  home.ts file:
  pickOlderPeople(age){ this.people = this.afDatabase.list('random', { query: { orderByChild: 'age', startAt: parseInt(age) } }); }
  It’s almost the same as the one before, just 2 things change:
  - We’re using
  startAtinstead of
  equalTosince we want everyone who starts at that value or higher instead of just that value.
  - We’re using
  parseInt(age)to transform the age value from String to Number, this is because no matter what I was doing the function was taking the
  ageas a number but passing it to the
  startAtas a String, so if you figure this one out let me know.
  And there you have it, you can get everyone who is above a certain age.