title: 1:N or N:1 relations of two objects in Angular2 as observables from a http request
body: <p>Referring to the "<a href="https://angular.io/docs/ts/latest/tutorial/" rel="noreferrer">Tour of heroes</a>" from the angular tutorial.</p>
  
  <p>Assumed that we'll give all existing heroes the possibility to wear a special suite, but any other hero can wear the same suite too. We really don't want them to be naked. In this case we would have a related data object that holds all information’s about the available suits. The hero itself has to know which suite he is wearing and where he can find his selected one. For this case we would create a property that holds the ID of his chosen dress.</p>
  
  <p>What would be the right way to resolve the relation between the hero and his suite in Angular as observable from http request?</p>
  
  <p>E.g:</p>
  
  <p><code>app/hero.ts</code></p>
  
  <pre><code>export class Hero {
    id: number;
    name: string;
    suiteId: number;
  }
  </code></pre>
  
  <p><code>app/suit.ts</code></p>
  
  <pre><code>export class Suite {
    id: number;
    name: string;
    material: string;
    color: string;
  }
  </code></pre>
  
  <p><code>app/in-memory-data.service.ts</code></p>
  
  <pre><code>import { InMemoryDbService } from 'angular-in-memory-web-api';
  export class InMemoryDataService implements InMemoryDbService {
    createDb() {
      let heroes = [
        {id: 11, name: 'Mr. Nice', suitId: 11},
        {id: 12, name: 'Narco', suitId: 12}
      ];
      let suits= [
        {id: 11, name: 'Nice and blue', material: 'Cotton', color: 'blue'},
        {id: 12, name: 'Sexy and red', material: 'Silk', color: 'red'}
      ];
      return {heroes, suits};
    }
  }
  </code></pre>
  
  <p>I know that something like next code block will work, but I would like to know how to resolve this the “observable” way.</p>
  
  <pre><code>// ...
  getHeroesWithSuit(): Observable&lt;Hero[]&gt; {
    return this.http.get(this.heroesUrl)
      .map( response  =&gt; response.json().data as Hero[])
      .do( response =&gt; response.forEach( ( data ) =&gt; data.suite = this.suiteService
        .getSuit(data.suiteId)
        .subscribe(suite =&gt; data.suite = suite as Suite)
      ))
      .catch(this.handleError);
  }
  // ...
  </code></pre>