title: How do I refactor nested subscribes with switchmap or other rxjs options when working with Firestore Observables?
body: <p>I'm new to angular and have a hill to climb before I understand what's going on and working with observables from Firestore has me stumped. I need the ID field from one service call to get data from the following two service calls while avoiding the dreaded undefined. How do we do this?</p>
  <pre><code>this.myMatch = this.route.snapshot.paramMap.get(&quot;createdMatchIdKey&quot;);
  
  this.golfDataService.GetSelectedMatch(this.myMatch)
    .subscribe(result =&gt; {
      this.match = result;
      this.setupTable(this.match.matchCourseId);
      this.golfDataService.GetSelectedGolfCourse(this.match.matchCourseId)
        .subscribe(result =&gt; {
          this.course = result;
          console.log(this.course);
        })
      this.golfDataService.GetSelectedCourseTees(this.match.matchCourseId)
        .pipe(takeUntil(this.onDestroy))
        .subscribe(result =&gt; {
          this.tees = result;
          console.log(this.tees);
          for (var i = 0; i &lt; this.tees.length; i++) {
            this.golfDataService.GetHoles(this.tees[i].teeIdKey)
              .subscribe(result =&gt; {
                console.log(this.teeHoleInfo);
                this.teeHoleInfo.push(result);
                console.log(this.match);
              })
          }
        })
    })
  </code></pre>