Learn how to perform queries in Ionic using AngularFire

First Published: 1 December 2016
Updated on: 18 June 2019

Introduction

Pulling lists of data from Firebase is helpful. 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 some 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 :-)

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 AngularFire

The first thing we’ll need is a bit of introduction to what kind of data we’re going to sort.

I created a dummy data node on my Firebase app that’s 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 that we can query against that list.

For that open your home.ts file and import AngularFire2:

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

We’re also importing AngularFireList 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: AngularFireList<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, and 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 are already some data there to play with:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let person of people | async">
      <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>

Query AngularFire Realtime Database

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-option value="blue">Blue</ion-option>
      <ion-option value="green">Green</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

Query AngularFire Realtime Database

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',
    ref => ref.orderByChild('eyeColor').equalTo(eyeColor));
}

Query AngularFire Realtime Database

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 calledeyeColorin 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 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:

pick(eyeColor: string){
  this.people = this.afDatabase.list('random',
    ref => ref.orderByChild('eyeColor').equalTo(eyeColor));
}
pickOlderPeople(age){
  this.people = this.afDatabase.list('random',
    ref => ref.orderByChild('age').startAt(parseInt(age)));
}

It’s almost the same as the one before, just two things change:

  1. We’re using startAt instead of equalTo since we want everyone who starts at that value or higher instead of just that value.
  2. 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 age as a number but passing it to the startAt as a String, so if you figure this one out let me know.

Query AngularFire Realtime Database

And there you have it. You can get everyone who is above a certain age.