Angular 2 router parameters issue multiple http calls

Question

I have a route in Angular where I pass an id to load an element from my database. In my component I load the element using the following code:

this.route.params
        .map((params: Params) => params['id'])
        .switchMap((id: number) => this.service.getElement(id))
        .catch((e) => {
            return Observable.throw(e);
        })
        .subscribe((data: Models.IElement) => {
            this.element= data as Models.IElement;
            this.setTitle();
        }, () => this.router.navigate(['/']));

Where this.service.getElement(id) makes an http call and returns an Observable. It all goes well. The problem I have now is that I want to issue a second http call and I don't know where to add the code for the second service http call (it would be a similar method to getElement, receiving an id as parameter).

More info: The second http call would ideally be issued in parallel to the getElement call. It only depends on the id from the Params.

How can I make this work using Observables? Is there any way to make it work?

Where do you want to make that second call ? On what is it based ? On previous response ? the route params id ? Give more info please — maxime1992
– maxime1992, Commented Feb 28, 2017 at 16:40
It's only based on the id. Ideally it would be issued in parallel to the getElement call. — Carles Company
– Carles Company, Commented Feb 28, 2017 at 16:41
I don't have time to give you a solution right now, but take a look into Fork Join, it's the equivalent of Promise.all. It'll subscribe to every Observables you pass, and then will wait for every one of them to finish before continuing. Of course, they're launched in parallel. I let you try something and later if don't succeed I'll help :) — maxime1992
– maxime1992, Commented Feb 28, 2017 at 16:56

Carles Company · Accepted Answer · 2017-03-02 10:29:19Z

1

Using @Maxime's comment I came with the following code:

this.route.params
        .map((params: Params) => params['id'])
        .switchMap((id: number) => {
            this.id = id;
            return Observable.forkJoin([this.service.getElem(id), this.service.getElemDocs(id)]);
        })
        .catch((e) => {
            return Observable.throw(e);
        })
        .subscribe(([elem, documents]) => {
            this.elem= elemas Models.IElement;
            this.elemDocuments = documents;
            this.setTitle();
        }, () => this.router.navigate(['/']));

This launches both calls at the same time and waits for completition from both.

answered Mar 2, 2017 at 10:29

Carles Company

7,1955 gold badges52 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 router parameters issue multiple http calls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related