Pipe not correctly mapping and error handling Angular

Question

I have a method in a service which returns an Observable. When I subscribe to the observable when I call the method in my component everything works fine and i get my account properly:

this.service.getAccountDetails(username)
    .subscribe(account =>{
        this.podcasts.push(account);
    });

However when I tried to implement this using a pipe with a map and catchError it returns nothing.

this.service.getAccountDetails(username)
    .pipe(
        map(account => {
            this.podcasts.push(account);
        }),
        catchError((error: Error) => {
            //Do some error stuff
            return of(null);
        })
    );

The method in the service I call looks like this:

getAccountDetails(u:String): Observable<Object> { }

Obviously I must have some annoying syntax error, but for the love of God I can't find it. Please help!

You must subscribe(), otherwise the request is never sent, and the pipeline of operations is never executed. map() is supposed to transform an event into something else, not to trigger side-effects. — JB Nizet
– JB Nizet, Commented Nov 4, 2018 at 18:46

Sajeetharan · Accepted Answer · 2018-11-04 18:53:43Z

1

Change it to something like this, as JB Nizet mentioned in the comment, you must subscribe,

this.service.getAccountDetails(username)
.pipe(
  catchError(this.errorHandler)
)
.subscribe((username) => this.podcasts.push(username););

and

   errorHandler(error: Error): Observable<any> {
    console.error('ERROR HANDLER', error);
    return new EmptyObservable();
  }

answered Nov 4, 2018 at 18:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Tom O'Brien Over a year ago

forgive me for i am a dumbass

Jameel Moideen · Accepted Answer · 2018-11-04 19:03:21Z

1

You don't need a map over here unless you are not transforming the result

this.service.getAccountDetails(username)
    .pipe(
        catchError((error: Error) => {
            //Do some error stuff
            return of(null);
        })
    );

this.service.getAccountDetails(username)
    .subscribe(account =>{
        this.podcasts.push(account);
    });

answered Nov 4, 2018 at 19:03

Jameel Moideen

8,01913 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Pipe not correctly mapping and error handling Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related