Display data from Firebase Realtime Database in Ionic App

Question

I want to display all the children of "Requests" in my firebase realtime database inside a list like. This is how my realtime database looks like:

So far i have been able to get the data from firebase in form of JSON.

requests.page.ts

 import { Component, OnInit } from '@angular/core'; import { from, Observable } from 'rxjs'; import { RequestsService } from '../requests.service'; import { AngularFireDatabase,AngularFireList } from '@angular/fire/database'; import { element } from 'protractor'; u/Component({ selector: 'app-requests', templateUrl: './requests.page.html', styleUrls: ['./requests.page.scss'], }) export class RequestsPage implements OnInit { requests:Promise<any[]>; requestsList: any[] = []; constructor( private requestsService: RequestsService, private firebaseDB: AngularFireDatabase, ) { } ngOnInit() { { var ref = this.firebaseDB.database.ref('/Requests/').once('value').then(function (data){ var jsonRequest = JSON.parse(JSON.stringify( data.val())); console.log("JSONREQUEST:????>>>>>>>" + JSON.stringify(jsonRequest) ); requests = this.jsonRequest; }) } }

requests.page.html

 <ion-header> <ion-toolbar> <ion-title>requests</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item *ngFor = "let r of requests | async"> <ion-label class="ion-text-wrap"> {{r.name}}<br> <p>{{r.bloodGroup}}</p> </ion-label> </ion-item > </ion-list> </ion-content>

I get this out put in the console

 JSONREQUEST:????>>>>>>>{"-MaTAKR8qxebin2dcVhp":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"Need Blood Urjently","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621856442436,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaTvIvdjH1XpN7mHfoi":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"f","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621869019139,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaU01T98spFheBGXdEh":{"ID":"Request","bloodGroup":"AB+","location":"Kolkata","message":"a","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Thalassemia","timestamp":1621870520547,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaU3-PF5JDxBgr4dMkK":{"ID":"Request","bloodGroup":"A+","location":"Mumbai","message":"a","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Transplant","timestamp":1621871298520,"type":"Whole Blood","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaUDTcYPNvCoxoNTze-":{"ID":"Request","bloodGroup":"AB+","location":"Siliguri,West Bengal","message":"qwert","name":"Hemant Baid","phoneNumber":"7865436789","reason":"Transplant","timestamp":1621874043756,"type":"Double Red Cell","uid":"Bstt2BRdvAPodfSlUT9367a8DB52"},"-MaUSkPxPlM-ihK00cVa":{"ID":"Request","bloodGroup":"B-","location":"Delhi","message":"hsodn","name":"Nilabja Das ","phoneNumber":"9876545678","reason":"Other","timestamp":1621878049000,"type":"I don't know","uid":"L0A6M57zXJaXzoSp1RCZMD5WCXm2"},"-MaUTBArFaLAy_TV0SeO":{"ID":"Request","bloodGroup":"AB-","location":"Kandi,West Bengal","message":"location test","name":"Nilabja Das ","phoneNumber":"9876545678","reason":"Thalassemia","timestamp":1621878162707,"type":"Cord Blood","uid":"L0A6M57zXJaXzoSp1RCZMD5WCXm2"}}

After compiling the list is empty and nothing is displayed on the screen. Can someone please explain me what am i doing wrong.

EDITED: After removing everything inside then and having only console.log(data) I get this output:

RE-EDITED:

console.log(data.val());

Answer 1

1. You declare and access requests as Promise<any[]> but I don't see where it's assigned a value that is a promise.

2. You console.log the variable jsonRequest , but then set requests to this.jsonRequest; .

It's possible that #1 doesn't actually matter technically, I'm not familiar enough with Angular to say for sure, but it still seems wrong...

Answer 2

import { Component, OnInit } from '@angular/core';
import { from, Observable } from 'rxjs';
import { RequestsService } from '../requests.service';
import { AngularFireDatabase,AngularFireList } from '@angular/fire/database';
import { element } from 'protractor';

u/Component({
 selector: 'app-requests',
 templateUrl: './requests.page.html',
 styleUrls: ['./requests.page.scss'],
})
export class RequestsPage implements OnInit {
 requests:Promise<any[]>;
 requestsList : any[] = [];

constructor(
 private requestsService: RequestsService,
 private firebaseDB: AngularFireDatabase,
  ) { }

 ngOnInit() {

    {  var ref = this.firebaseDB.database.ref('/Requests/').once('value').then((data) => {
    const response_data = data.val();
    const requests = [];
    for (const key in response_data) {
         if (response_data.hasOwnProperty(key)) {
             requests.push(response_data[key]);
        }
    }

     this.requests = requests;
    })
  }

}

And for previewing in html, just put *ngFor="let request of requests" and keep the same things u made as field names and it will get its values..