Fetch objects from Firebase database and display them in your Ionic App

Last updated on July 20th, 2018 |

CRUD, it’s one of those things that every app needs to do, CRUD stands for Create, Read, Update, and Delete, and it refers to the operations we do with our app’s data.

In this guide, you’ll learn how to store new objects to the database, read those objects and show them in your app, update the value on those objects, and delete them from the database.

CRUD Firebase data using Ionic Framework

The first thing we’ll do is to create a form inside our home page (if you haven’t created the app, go through this post first).

Open src/pages/home/home.html and set up a couple of inputs that takes two values, a first name, and the last name.

<ion-content>

  <ion-list>
    <ion-item>
      <ion-label fixed>First Name</ion-label>
      <ion-input type="text" [(ngModel)]="firstName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>Last Name</ion-label>
      <ion-input type="text" [(ngModel)]="lastName"></ion-input>
    </ion-item>
  </ion-list>

  <button ion-button block (click)="createPerson(firstName, lastName)">
    Create Person
  </button>

</ion-content>

The button calls the createPerson() function, which takes 2 parameters, firstName, and lastName, now let’s go into the home.ts file, import Firebase, and create that function.

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import firebase from 'firebase';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  constructor(public navCtrl: NavController){}

  createPerson(firstName: string, lastName: string): void {

  }
}

We’ll focus now on the createPerson() function, the first thing we need to do is to create a Firebase database reference so we can communicate with the database.

createPerson(firstName: string, lastName: string): void {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
}

Then, we want to pass the two variables to that reference:

createPerson(firstName: string, lastName: string): void {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
  personRef.set({
    firstName,
    lastName
  })
}

NOTE: Since we’re working with modern JavaScript (or TypeScript in our case), when both the property’s name and value are the same, we can pass just one of them instead of doing this:

personRef.set({
  firstName: firstName,
  lastName: lastName,
});

We’re using .set() to store the data in Firebase, this goes to the /person1 node in the database and creates both properties. Be very careful when using .set() it will replace everything under the /person1 node.

Update Firebase data

Let’s now see how the process of updating will be, go back to your home.html file and change the function from createPerson() to updatePerson()

<ion-content>

  <button ion-button block (click)="updatePerson(firstName, lastName)">
    Update Name
  </button>

</ion-content>

Now go into your class and create that function:

updatePerson(firstName: string, lastName: string): void {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
  personRef.update({
    firstName,
    lastName
  })
}

We’re now using the .update() function from Firebase’s SDK, the main difference between .set() and .update() is that while .set() is destructive and changes the entire node, the .update() function only updates the value of the properties you send.

For example, if you have other properties under /person1, like birthDate, then using .set() will delete that and just leave the properties you’re passing, and using .update() will modify the properties you’re passing and leave birthDate alone.

Delete Firebase data

What if you want to delete the entire /person1 node? Let’s create the deletePerson() function and have it remove the entire /person1 node.

updatePerson(): void {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
  personRef.remove()
}

Calling the .remove() function does the job, just be careful when you call it, make sure you’re calling it on the right path, it’s a destructive function and will remove the entire node with every child object it has.

Read Firebase data

And lastly, we’re going to display the data in our HTML file, first, go to home.ts and inside the ionViewDidLoad() function let’s call our person object.

ionViewDidLoad() {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
}

Now to read that object we must do two things, first, let’s create a variable to hold that object, right before the constructor create a person variable.

public myPerson = {};
constructor(){}

And then we need to call one of Firebase database listeners on that reference. We’ll use the .on() listener.

ionViewDidLoad() {
  const personRef: firebase.database.Reference = firebase.database().ref(`/person1/`);
  personRef.on('value', personSnapshot => {
    myPerson = personSnapshot.val();
  });
}

Then you can go into your home.html file and display it like this:

<p>
  The person's name is {{ myPerson.firstName }} {{ myPerson.lastName }}
</p>

When we call .on(), it subscribes to that node and syncs the changes in real time, for example, if you open your Firebase console on the web, and go to the database, manually edit those values and you’ll see how they edit in your Ionic app without you doing any extra work.

And that’s it for now. If you want to expand on the other database listeners, make sure to check out Firebase official documentation for the JS SDK.

If you’re running into any issues, just leave a comment below, and I’ll be happy to help.

Next Steps

If you want to take a deeper dive on Ionic + Firebase you should go through my FREE course: Build your first Firebase powered Ionic app.