Angular2 response mapping with subscriber

Question

In my angular2 application, I do have authentication.service.ts and login.component.ts

authentication.service.ts

login(username: string, password: string) {
    return this.http.post('/auth/loginapp', JSON.stringify({ username: username, password: password }))
      .map((response: Response) => {
        // login successful if there's a jwt token in the response
        let user = response.json();
        //Printt the backend response to the console
        this.logger.debug('User '+ JSON.stringify(user));
        if (user && user.token) {
          // store user details and jwt token in local storage to keep user logged in between page refreshes
          localStorage.setItem('currentUser', JSON.stringify(user));
        }
      });
  }

authentication.service.ts calls to backend authentication services and get the response according to user input and save to the localStorage.

login.component.ts

this.authenticationService.login(this.model.username, this.model.password)
      .subscribe(
        data => {
          this.logger.debug("Login User"+ JSON.stringify(data))
          this.router.navigate(['register']);
        },
        error => {
          this.logger.error(error);
          this.alertService.error(error);
          this.loading = false;
        });

I am always getting data as undefined in login.component.ts. authentication.service.ts gets the response correctly. I need to get the response data to the login.component.ts. could anyone tell me the issue with my code?

Thibs · Accepted Answer · 2017-02-11 02:40:15Z

2

The Observable map operator expect you to return something, and I believe you are not returning anything there. Usually you want to modify the data in a map operator. But in your case you are not. Since you performing an action outside the 'stream' one option is to use the .do operator.

You can use do instead...

.do((response: Response) => {
        let user = response.json();
        if (user && user.token) {
          localStorage.setItem('currentUser', JSON.stringify(user));
        }
});

If you insist on using map, make sure it returns something...

.map((response: Response) => {

        let user = response.json();
        if (user && user.token) {
          localStorage.setItem('currentUser', JSON.stringify(user));
        }
       return response;
});

answered Feb 11, 2017 at 2:40

Thibs

8,31813 gold badges60 silver badges92 bronze badges

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

2 Comments

123Ex Over a year ago

Thank you, this worked, I tried with .do but it did not. if you do have good tutorials about this could you give me a link?

Thibs Over a year ago

Nor sure why didn't work, but here are some docs: reactivex.io/rxjs/class/es6/…

Collectives™ on Stack Overflow

Angular2 response mapping with subscriber

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related