Nested Observables from nested http requests in Angular

Question

Here's what I intend to do.

Request https://reqres.in/api/users/2

Which sends a response as follows.

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar":
      "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  }
}

Now, I wanna grab the avatar url and make another request, which gives me the image binary.

At the end of this, what I want as output is an Observable that gives me this data.

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar":
      "BINARY_GIBBERISH HERE"
  }
}

Here's how I approached but can't finish it.

this.http
  .get('https://reqres.in/api/users/2')
  .switchMap(a => {
    const image$ = this.http.get(a.json().data.avatar);
    const data = Observable.of(a.json().data);
    // Do something here to combine.
  })
  .subscribe(a => {
    // get data here.
  });
}

Basically, is there any way to have a structure like this,

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar": [Observable from this.http.get]
  }
}

Which then gets resolved to my final data?

martin · Accepted Answer · 2017-09-14 17:26:30Z

2

You don't need to use switchMap for this and use concatMap or mergeMap instead:

this.http
  .get('https://reqres.in/api/users/2')
  .concatMap(a => {
    const data = a.json().data;
    const image$ = this.http.get(data.avatar);

    return image$.map(imageData => {
      data.avatar = imageData;
      return data;
    });
  })
  .subscribe(a => {
    // get data here.
  });
}

answered Sep 14, 2017 at 17:26

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praveen Puglia Over a year ago

Brilliant! Thanks so much :)

Collectives™ on Stack Overflow

Nested Observables from nested http requests in Angular

Here's how I approached but can't finish it.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here's how I approached but can't finish it.

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related