Retrieve nested data list from angularfire2 5.0.0-rc.2

user_6193041 0
Viewed 2012

I want to display list of objects from the Firebase to the Ionic view using angularfire2 5.0.0-rc.2.

This is my list of objects from the Firebase

this is my list of objects from the Firebase

This is the method from the service, used to retrieve all the data related to Restaurants

getRestaurants() {
    this.restaurants = this.af.list('/Restaurants')
    return this.restaurants;
}

This the component where I accept data from the service

 export class RestaurantsPage {

  restaurants: Observable<any[]>;
  constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
    this.dataservice.getUserEmail().subscribe(res => {
      this.restaurants = this.dataservice.getRestaurants().valueChanges();
    })
    // this.items.subscribe(res => console.log(res[0].$key));
 }

And this is the HTML page which I want to display my data

<ion-content class="card-background-page">
  <ion-list>
    <ion-item *ngFor="let restaurant of restaurants | async">
      <ion-thumbnail item-start>
        <img src="img/thumbnail-totoro.png">
      </ion-thumbnail>
      <h2>{{restaurant.Name}}</h2>
      <h3>{{restaurant.Description}}</h3>
      <button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
    </ion-item>
  </ion-list>
</ion-content>

And i know in the service method i have done nothing but just returned the value getting form the Firebase API. What i want is to know how could i iterate through the keys inside s@g,com and show the data inside each key in my HTML page as a list. I have tried it using map operator as well, but i couldn't find a better solution in angularfire2 5.0.0-rc.2.

ionic3 angular firebase
1 Answers

I found these links helpful for anybody who has the same problem

Updating FirebaseListObservable to AngularFireList https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Retrieving data as lists
https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

And this is the way that i have done it

This is my service

    getRestaurants() {
    let restaurants = this.af.list('/Restaurants');
    return restaurants;
}

getResturantsFromKeys(key){
    let rest = this.af.list('/Restaurants/'+ key);
    return rest;
}

And this is my component

  restaurants: any[] = [];
  allRestaurants: Observable<any[]>
  constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dataservice: handleDataService) {
    this.dataservice.getUserEmail().subscribe(res => {
      this.dataservice.getRestaurants().snapshotChanges().subscribe(actions => {
        actions.forEach(action => {
          // console.log(action.payload.val());
          this.allRestaurants = this.dataservice.getResturantsFromKeys(action.key).valueChanges();
          this.allRestaurants.subscribe(res => {
            res.forEach(element => {
              this.restaurants.push(element);
            });
          });
        });
      });
    });
  }

And HTML file looks like this

 <ion-item *ngFor="let restaurant of restaurants">
  <h2>{{restaurant.Name}}</h2>
  <h3>{{restaurant.Description}}</h3>
  <button ion-button clear item-end (click)="gotoPage(restaurant)">View</button>
</ion-item>

May be there will be a better and easy answer than this one. But this is how i get through the problem.

user_61930410
Related