Angular2 Merging observables
<p>I'm having trouble getting with some observables. I can't seem to get two
observables to place nice together. They work just fine on their own, but I
need both values.</p>

<pre class="lang-js prettyprint-override"><code>db.glass.subscribe( ( glass: GlassData[] ): void =&gt; {
  console.log( glass ); // This prints
});

db.cassette_designs.subscribe( ( cassettes: CassetteData[] ): void =&gt; {
  console.log( cassettes ): // This prints
});
</code></pre>

<p>Not being all that familiar with observables, the first thing I tried was
nesting one inside the other, but the inner one doesn't seem to do anything.</p>

<pre class="lang-js prettyprint-override"><code>db.glass.subscribe( ( glass: GlassData[] ): void =&gt; {
  console.log( glass ); // This prints

  db.cassette_designs.subscribe( ( cassettes: CassetteData[] ): void =&gt; {
    console.log( cassettes ): // This doesn't
  });
});
</code></pre>

<p>This seemed a bit silly to be so I searched on Google to see if there was a
better way to combine observables and it turns out there are a few. I tried
<code>zip</code> and <code>forkJoin</code> since they looked the most like what I wanted to do, but
nothing would work with them either.</p>

<pre class="lang-js prettyprint-override"><code>Observable.zip( db.cassette_designs, db.glass, ( cassettes: CassetteData[], glass: GlassData[] ): void =&gt; {
  console.log( cassettes ); // doesn't print
  console.log( glass     ); // doesn't print
});

Observable.forkJoin( [ db.cassette_designs, db.glass ] ).subscribe( ( data: any ): void =&gt; {
  console.log( data ); // doesn't print
});
</code></pre>

<p>It could be something as simple as I'm not calling the functions correctly, but
I'd have thought I would get some sort of warning or error at some point. <code>tsc</code>
doesn't have any problem with the code and I get no messages in the developer
consoles on either Chrome or Firefox.</p>

<h1>Update</h1>

<p>I've tried <code>combineLatest</code>, but it still doesn't display anything in the console. I must be missing something, but I'm not sure what. They work individually.</p>

<pre class="lang-js prettyprint-override"><code>Observable.combineLatest( db.cassette_designs, db.glass, ( cassettes: CassetteData[], glass: GlassData[] ): void =&gt; {
  console.log( cassettes ); // doesn't print
  console.log( glass     ); // deson't print
});
</code></pre>

<p>The observables are create in the following way:</p>

<pre class="lang-js prettyprint-override"><code>...

public Listen( event: string ): Observable&lt;Response&gt;
{
  return new Observable&lt;Response&gt;( ( subscriber: Subscriber&lt;Response&gt; ): Subscription =&gt; {
    const listen_func = ( res: Response ): void =&gt; subscriber.next( res );

    this._socket.on( event, listen_func );

    return new Subscription( (): void =&gt;
      this._socket.removeListener( event, listen_func ) );
  });
}

...
</code></pre>

<p>Then to actually get the observables I send a listen for responses on the relevant event. e.g.</p>

<pre class="lang-js prettyprint-override"><code>...

public cassette_designs: Observable&lt;CassetteData[]&gt;;

...

this.cassette_designs = _socket.Listen( "get_cassette_designs" )
    .map( ( res: Response ) =&gt; res.data.data );
</code></pre>