Trying to merge multiple observables into one in Angular 2 project
<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>