Nested Query over 3 levels

Question

I am trying to get a result back from Firebase using this query:

  // Get all Tipps
  getAll(match: String): Observable<any> {
    let filter: Object = { query: { orderByChild: 'match', equalTo: match } };
    return this.loginService.af.database.list('/tipps/', filter).map((tipps) => {   
      return tipps.map((tipp) => { 
        tipp.matchsub = this.loginService.af.database.object("/matches/" + tipp.match).map((matches) => {
          return matches.map((match) => {
            match.team1sub = this.loginService.af.database.object("/teams/" + match.team1);
            match.team2sub = this.loginService.af.database.object("/teams/" + match.team2);
            return match;
          })
        });
        return tipp;
     });
   });
  }

I am not sure if it does what it should, because the 2nd level is already an observable where I cant look the output into.

I am using this code in my template to get the data out:

<div class="match_container" *ngFor="let tipp of tippsmodelview; let i = index;">
   <div class="matchbody-col3">
     {{(tipp.matchsub.team2sub | async)?.teamname}}
   </div>
</div>

The output doesn't show an error, but it also doesn't work. Who can give me a hint to show the data of the 3rd level?

Answer 1

I would say try to restructure your Firebase database - as you are already going 3 level deep to get some data, it should be flatter.