title: Chaining RESTful endpoint invocations in Angular
body: <p>I have seen countless posts on SO that seem to dance around what I'm trying to accomplish, but none of them hit the mark. So.... here's another post about chaining RESTful endpoint invocations in Angular. Here's my simplified example:</p>
  <p>Given a data model of Student, Course, &amp; Enrollment:</p>
  <pre><code>interface Student {
    id: number;
    studentName: string;
  }
  
  interface Course { 
    id: number;
    courseName: string;
  }
  
  interface Enrollment {
    studentId: number;
    courseId: number;
  }
  </code></pre>
  <p>...and given the following method in my Angular service:</p>
  <pre><code>getEnrollmentsForStudent(studentId: number): Observable&lt;Enrollment[]&gt; {
     return this.http.get&lt;Enrollment[]&gt;('http://url/enrollment?id='+studentId);
  }
  </code></pre>
  <p>I need to write a 2nd method with the following signature:</p>
  <pre><code>getCoursesForStudent(studentId: number): Observable&lt;Course[]&gt; {
     ...
  }
  </code></pre>
  <p>that uses the Enrollment array from the getEnrollmentsForStudent method to get all the relevant Course objects (here's a <a href="https://stackblitz.com/edit/angular-chain-observables?file=src/app/registration.service.ts" rel="nofollow noreferrer">StackBlitz</a>). I'm sure there is some magic combo of RxJS operators to do this, but I've struck out trying to figure it out.</p>
  <p>Edit: here's a minimal reproducible example of my Angular service:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  
  
  interface Student {
    id: number;
    studentName: string;
  }
  
  interface Course { 
    id: number;
    courseName: string;
  }
  
  interface Enrollment {
    studentId: number;
    courseId: number;
  }
  
  
  @Injectable()
  export class RegistrationService {
  
    constructor(private http: HttpClient) { }
  
    getEnrollmentsForStudent(studentId: number): Observable&lt;Enrollment[]&gt; {
      return this.http.get&lt;Enrollment[]&gt;('http://url/enrollment?id=studentId');
    }
  
    getCoursesForStudent(studentId: number): Observable&lt;Course[]&gt; {
      // 1. get Enrollments for student using getEnrollemtnsForStudent
      // 2. for each enrollment, get the course
      // 3. return array of Course objects
      return null;
    }
  
  }
  </code></pre>