Sending sequential Http Requests using RXJS Observables

Question

I would to have a function which sends an http request to an endpoint giving the list of all items, and then sending a second request to get the first element on that list. The function should return the last item. I'm using the following code but the second http request is not working.

getFirstItem(): Observable<any> {
  return this.getList().pipe(concatMap(value => this.getItem(value[0].id)));
}

Using Angular 7 and rxjs 6.4.0

Any help is appreciated.

Edit: When running the following snippet, the second console log never gets called

getFirstItem(): Observable<any> {
  return this.getList().pipe(
    tap(x => console.log(x)),
    concatMap(value => this.getItem(value[0].id)),
    tap(x => console.log(x)) // never called
}

I added a few more details to the question, hope its clearer — Niku Hysa
– Niku Hysa, Commented Dec 2, 2019 at 10:10

spierala · Accepted Answer · 2019-12-02 22:37:30Z

1

Your code looks fine. I just wonder how this.getItem is implemented.

Anyway here is an working example with concatMap: https://stackblitz.com/edit/rxjs-api-call-jvqj5q?file=src/app/app.component.ts

You can use mergeMap, concatMap, switchMap. All of them will work. They just behave differently regarding how the inner Observable (this.getItem) is treated when the outer observable emits (this.getList).

More info here: https://morioh.com/p/fcfea9850b90

answered Dec 2, 2019 at 22:37

spierala

2,7573 gold badges28 silver badges55 bronze badges

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

Comments

Adrita Sharma · Accepted Answer · 2019-12-02 10:05:17Z

-1

You can use mergeMap

var result = this.getList().pipe(
  mergeMap(value =>  this.getItem(value[0].id)))
);

answered Dec 2, 2019 at 10:05

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

Niku Hysa Over a year ago

I didn't downvote but, I'm trying to understand why its not working, not to use another operator

Krzysztof Raciniewski Over a year ago

I think someone punished you for this answer, Your answer is OK but the topic is replicated

Collectives™ on Stack Overflow

Sending sequential Http Requests using RXJS Observables

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related