Title: Firebase Realtime Database Ionic returning null
Tags: html;angular;firebase;ionic-framework;ionic4
Question: I'm trying to incorporate a Firebase database into my Ionic application using Angular. I was following the instructions laid out on the AngularFire github page (https://github.com/angular/angularfire2) but when I actually run the application I keep getting a null response. I also am confused on the input of the of the db.object method (db.object('item')). What does 'item' actually represent?
This is my app.component.ts file
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { MenuController } from '@ionic/angular';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
export class AppComponent {
item: Observable<any&gt;;
example: Observable<any&gt;;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private menu: MenuController,
private db: AngularFireDatabase
this.item = db.object('item').valueChanges();
this.initializeApp();
initializeApp() {
this.platform.ready().then(() =&gt; {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
close(){
this.menu.close();
This is my app.component.html file
<ion-app&gt;
<ion-menu side="start" menuId="first"&gt;
<ion-header&gt;
<ion-toolbar color="primary"&gt;
<ion-title&gt;Hi</ion-title&gt;
</ion-toolbar&gt;
</ion-header&gt;
<ion-content&gt;
<ion-list&gt;
<ion-item [routerLink]="['/orders']" routerLinkActive="active" (click)="close()" &gt;My Orders</ion-item&gt;
<ion-item [routerLink]="['/apps']" routerLinkActive="active" (click)="close()"&gt;My</ion-item&gt;
<ion-item [routerLink]="['/pres']" routerLinkActive="active" (click)="close()"&gt;My</ion-item&gt;
<ion-item&gt;{{ (item | async)?.name }}</ion-item&gt;
</ion-list&gt;
<li class="text" *ngFor="let item of items | async"&gt;
{{ item | json }}
</li&gt;
</ion-content&gt;
</ion-menu&gt;
<ion-router-outlet main&gt;</ion-router-outlet&gt;
</ion-app&gt;
This is my app.module.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, FormsModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule],
providers: [
StatusBar,
GooglePlus,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
bootstrap: [AppComponent]
export class AppModule {}
Image of my Firebase database. This is what can be seen right underneath my app name: https://pasteboard.co/HTxY5eC.png

Here is the accepted answer: Hi Kiran and welcome to SO. You went way overkill on how much information you provided, but rather be safe than sorry - right?
In the example you're looking at item is the node in the database. I take it you're also fairly new to Firebase, so I won't assume anything.... Have you played around with the Firebase console yet? (https://console.firebase.google.com/project/PROJECT_NAME/database/PROJECT_NAME/data) The view that allows you to see the contents of your Real-Time Database? Play around in there and add a few "nodes" in the database. They have nicely coordinated colors for when you add, edit, and remove data... pretty cool, right? Now erase your test nodes and create a node named "item", and add a few child nodes.
In your code this.item = db.object('item').valueChanges(); listens to the changes in the information stored in the item node of your database... and sticks it into the this.item variable. Your HTML file loops over any contents of the this.item variable and displays it via *ngFor="let item of items | async
So long story short - your original question... item isn't anything special - make it whatever you call your database node. You're getting null because right now you are missing a node in your DB with a matching name of item
Comment for this answer: Hi Jeremy it is my first time using Firebase. I actually imported data into the database using a premade JSON file. That's what I was assuming was happening. So if my JSON object has a name of "locations" would that be the node I have to reference?
Comment for this answer: Also, when I check the usage of the database of my Firebase app it shows that there have been connections made and downloads of certain sizes but still no data shown in my ionic app.
Comment for this answer: So I tried to change item to locations and got no change in my response. I uploaded an image of whats in my database to try to see if that could help
Comment for this answer: Omg now its working. Thank you! I thought because I was trying to extract an object and not a list, I would have to do an item and not items. But with items I have a JSON response now. How do I extract only certain elements of the JSON response? Like if I wanted to create a list of all the locations' "name" elements in another HTML file?
Comment for this answer: Actually nevermind I got it. Thank you so much though Jeremy!
Comment for this answer: Sounds right - without seeing the file itself I can't promise... but yeah, if you import your data and your node is called 'locations' then swap `item` in the code to be `locations` and it should pull in all of the child-nodes inside the main `locations` node.
Comment for this answer: The connections part makes sense - whenever you build and run your app, it's making a connection. During the initial setup you had to put in your app's API key and stuff - so it will definitely have connections made, even if you aren't having users log in/out yet. Can't say for sure what it would have been downloading, I haven't dug deep into what gets sent back and forth... but I wouldn't worry about it, and I wouldn't reference usage statistics while learning, save that for later if you want to optimize
Comment for this answer: Just spotted that you missed pluralizing your variable in your .ts file... your variable should be `items: Observable;` and `this.items = db.object('locations').valueChanges();`... notice how your HTML file references the plural `of items`


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:12/26/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><angular><firebase><ionic-framework><ionic4>', 'Title': 'Firebase Realtime Database Ionic returning null', 'ViewCount': 169, 'id': 53934919, 'user_AboutMe': None, 'user_AccountId': 9097000.0, 'user_DisplayName': 'Kiran', 'user_Reputation': 35.0, 'user_Views': 6.0, 'user_id': 6770625.0}}