title: Wait for Observable to complete within an Observable
body: <p>I have the following data structure:</p>
  
  <pre><code>export class Repo {
      id: number;
      name: string;
      contributors: Contributor[];
  }
  
  export class Contributor {
      id: number;
      login: string;
  }
  </code></pre>
  
  <p>I am using <code>Observable&lt;Repo&gt;</code> to fetch all repo data but I want to internally call another observable <code>Observable&lt;Contributor&gt;</code> to populate all contributors before the outer <code>Repo</code> is considered fully emitted. I am not sure how to do this. I have the following code.</p>
  
  <pre><code>private repos: Repo[] = [];
  
  getRepos(orgName: string): void {
      const repoBuild: Repo[] = [];
      this.githubService.getRepos(orgName).pipe(
          // this here won't wait for all contributors to be resolved
          map(repo =&gt; this.getRepoContributors(orgName, repo))
      ).subscribe(
          repo =&gt; repoBuild.push(repo),
          error =&gt; {
              this.repos = [];
              console.log(error);
          },
          () =&gt; this.repos = repoBuild
      );
  }
  
  // fetches contributors data for the repo
  private getRepoContributors(orgName: string, repo: Repo): Repo {
      const contributors: Contributor[] = [];
      repo.contributors = contributors;
      this.githubService.getRepoContributors(orgName, repo.name)
          .subscribe(
              contributor =&gt; {
                  // add to the total collection of contributors for this repo
                  contributors.push(contributor);
              },
              error =&gt; console.log(error),
              () =&gt; repo.contributors = contributors
          );
      return repo;
  }
  </code></pre>
  
  <p>I admit that my understanding on <code>Observable</code>'s is limited and I have struggled on this for quite few hours. I tried finding something that works for me on StackOverflow but I still could not find a working solution. Any help would be appreciated!</p>
  
  <p>(The code is written in Angular 5)</p>
  
  <p><strong>Solution:</strong></p>
  
  <p>I used @joh04667 suggestion below and eventually got it to work. Here is how I did it:</p>
  
  <pre><code>getRepos(orgName: string): void {
      const repoBuild: Repo[] = [];
      this.githubService.getRepos(orgName).pipe(
          // mergeMap() replaces `repo` with the result of the observable from `getRepoContributors`
          mergeMap(repo =&gt; this.getRepoContributors(orgName, repo))
      ).subscribe(
          repo =&gt; repoBuild.push(repo),
          error =&gt; {
              this.repos = [];
              console.log(error);
          },
          () =&gt; this.repos = repoBuild
      );
  }
  
  // fetches contributors data for the repo
  private getRepoContributors(orgName: string, repo: Repo): Observable&lt;Repo&gt; {
      repo.contributors = []; // make sure each repo has an empty array of contributors
      return this.githubService.getRepoContributors(orgName, repo.name).pipe(
          // tap() allows us to peek on each contributor and add them to the array of contributors
          tap(contributor =&gt; {
              // add to the total collection of contributors for this repo
              repo.contributors.push(contributor);
          }),
          // only picks the last contributor and replaces him/her with the repo
          last(
              () =&gt; false,
              () =&gt; repo,
              repo
          )
      );
  }
  </code></pre>
  
  <p>Here in the last part where I use <code>last()</code> I basically tell the <code>Observable</code> that even though it will process all values, I am only going to consume the last one. The last one is of type <code>Contributor</code> but I replace it with a default value (the <code>repo</code>) which allows me to change the return type from <code>Observable&lt;Contributor&gt;</code> to <code>Observable&lt;Repo&gt;</code> which is exactly what I need for the higher-level Observable.</p>