title: Trying to merge multiple observables into one in Angular 2 project
body: <p>I am trying to get my head around Observables in RxJs. I have a page where I need to display all users for a specific site. User and SiteUser entities are in separate API endpoints. I have the following endpoints</p>
  
  <pre><code>userService.getSiteUsers(siteId: string): Observable&lt;SiteUser[]&gt;;
  </code></pre>
  
  <p>where </p>
  
  <pre><code>export class SiteUser {
      site_id: string;
      user_id: string;
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>userService.getUser(user_id: string): Observable&lt;User&gt;;
  </code></pre>
  
  <p>where</p>
  
  <pre><code>export class User {
      id: string;
      name: string;
      email: string;
      ....
  }
  </code></pre>
  
  <p>So I have to do the following:</p>
  
  <ol>
  <li>Call siteUsers API to get all user ids for specific site</li>
  <li>For each user id make a getUser API call to get user details</li>
  </ol>
  
  <p>I can easily do this</p>
  
  <pre><code>let users: User[] = []; // this is bound in html view to a table
  this.userService.getSiteUsers("my site id")
                  .subscribe((siteUsers) =&gt; {
                      for (let siteUser of siteUsers) {
                          this.userService.getUser(siteUser.user_id)
                                          .subscribe((user) =&gt; {
                                              users.push(user);
                                          });
                      }
                  });
  </code></pre>
  
  <p>But this approach feels dirty or cumbersome. I am sure there is a much cleaner Observable way of doing it. I am very new to Observables, but as far as I understand I should be able to do something like this (not selectMany and mergeAll function are just my guesses, I tried it and it didn't work, I couldn't even find selectMany in rxjs library)) </p>
  
  <p>Get site user observable array -> for each element in observable array create user observable -> merge them all into observable array of users -> subscribe, so something like this:</p>
  
  <pre><code>this.userService.getSiteUsers("my site id") 
                  .selectMany((siteUser) =&gt; this.userService.getUser(user))
                  .mergeAll()
                  .subscribe((users) =&gt; {
                      this.users = users; 
                  });
  </code></pre>
  
  <p>Can someone please help, I can't get it working</p>
  
  <p>EDIT------</p>
  
  <p>Maybe something like this</p>
  
  <pre><code>this.userService.getSiteUsers("my site id")
      .switchMap(
         (siteUsers) =&gt; {
           let userQueries: Observable&lt;User&gt;[] = [];
           for (let siteUser of siteUsers) {
              userQueries.push(this.userService.getUser(siteUser.user_id));
           }
  
           return Observable.forkJoin(userQueries);
         }
      )
      .subscribe((users) =&gt; {
          this.users = users;
      });
  </code></pre>