title: Nested Observables from nested http requests in Angular
body: <p>Here's what I intend to do.</p>
  
  <ul>
  <li>Request <code>https://reqres.in/api/users/2</code></li>
  <li><p>Which sends a response as follows.</p>
  
  <pre><code>{
    "data": {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar":
        "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
    }
  }
  </code></pre>
  
  <ul>
  <li><p>Now, I wanna grab the avatar url and make another request, which gives me the image binary.</p></li>
  <li><p>At the end of this, what I want as output is an Observable that gives me this data.</p>
  
  <pre><code>{
    "data": {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar":
        "BINARY_GIBBERISH HERE"
    }
  }
  </code></pre></li>
  </ul></li>
  </ul>
  
  <h2>Here's how I approached but can't finish it.</h2>
  
  <pre><code>this.http
    .get('https://reqres.in/api/users/2')
    .switchMap(a =&gt; {
      const image$ = this.http.get(a.json().data.avatar);
      const data = Observable.of(a.json().data);
      // Do something here to combine.
    })
    .subscribe(a =&gt; {
      // get data here.
    });
  }
  </code></pre>
  
  <p>Basically, is there any way to have a structure like this,</p>
  
  <pre><code>{
    "data": {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": [Observable from this.http.get]
    }
  }
  </code></pre>
  
  <p>Which then gets resolved to my final data?</p>