title: Working with multiple nested subscriptions in sequence (Angular, RxJs)
body: <p>I need to construct a nested object from the result of three Observable streams and display the . All three observables return an array, and two depend on the result of the first. The code I have is as follows:</p>
  <pre><code>this.selectActiveFoos$.pipe(
    concatMap(foos =&gt; {
      return foos.map(foo =&gt; {
        let bars$ = this.barQuery.selectBarsByFooId(foo.id);  
        let bazs$ = this.bazQuery.selectBazsByFooId(foo.id); // these observables return Observable&lt;T[]&gt;
        return forkJoin([bars$, bazs$]).pipe(
          map(([bars, bazs]) =&gt; {
            return { 
              foo: foo,
              bars: bars,
              bazs: bazs
            }
          })
        );
      });
    })).subscribe(result =&gt; {
      console.log(result);
    });
  </code></pre>
  <p>}</p>
  <p>IntelliSense tells me that the type of result is as expected, i.e. a</p>
  <pre><code>{ foo: foo, bars: bar[], bazs: baz[] }
  </code></pre>
  <p>however, the console logs an observable as an output. This is really throwing me for a loop. I've searched online for quite some time but I can't seem to find an answer that works with nested arrays of Observable&lt;T[]&gt;.</p>
  <p>I would appreciate any advice!</p>