Angular CRUD - TAP returning undefined

[JD Lambert]

I am having difficulty grasping some of the concepts. Such as I have created a subscription to my SQL DB (users) upon login and I am able to present the data on the page (DOM). However, I a now trying to pull out specific data from the item to save for later use in my typescript file.

login.component.ts

this.usersService.getUsers() .subscribe((result: users) => (this.users[0] = result));

users.service.ts

public getUsers() : Observable<user[]> {      

     let userEmail = sessionStorage.getItem('userEmail');

     return this.http.get<user[]>(`${environment.apiUrl}/${this.url}/${userEmail}`).pipe(

      tap((res:any)=>{

        sessionStorage.setItem('userRole', res.userRole;

        })

     ); 

This returns as expected and fills the following html. 

login.component.html

<div class="row" style="background-color:transparent;"> <mat-card *ngFor="let user of user" class="ecard"> <mat-card-title>{{user.role}}</mat-card-title> </mat-card> </div>

However, I would like to use information from the 'user' to perform other functions in the ts file.

The TAP function is returning undefined and I do not understand why or how to correct this?

[bastien lemaire]

Hi

As per the documentation, `tap` returns `void` it is designed to perform side Effects (like modifying a global state such as sessionStorage).

if you subscribe to `getUsers` you will have access to the response:

```

public ngOnInit() {

  this.getUsers().subscribe(res => {

    console.log(res.userRole);

  })

}

```

Alternatively, you can store the response on the controller:

```

public getUsers(): Observable<user[]> {

  return this.http.get().pipe(

    tap(res => {

      sessionStorage.setItem('userRole', res.userRole);

      this.roles = res.userRole;

    })

  )

}

```

Hope this helps ;)

Bastien Lemaire

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/2313a684-6bf9-49cc-8ba5-985234395fa5n%40googlegroups.com.

[Joe Lambert]

Hello Bastien,

Thank you for offering these solutions.

I am confused by your statement that 'is is designed to perform side Effects (like modifying a global state such as sessionStorage)'.

I thought that is what I was accomplishing  in code of :

public getUsers() : Observable<user[]> {      

     let userEmail = sessionStorage.getItem('userEmail');

     return this.http.get<user[]>(`${environment.apiUrl}/${this.url}/${userEmail}`).pipe(

      tap((res:any)=>{

        sessionStorage.setItem('userRole', res.userRole);

        })

     ); 

When you say that is is used to modify, does this mean that my sessionStorage must already have a value in order to be modified?

Thank you again for your assistance!

JD

This message has been scanned for viruses and malware on behalf of National Travel Inc. by Barracuda Networks and Symantec

If you are not the intended recipient of this e-mail message, please notify the sender and delete all copies immediately.  The sender believes this message and all attachments were sent virus and malware free.  This message could have been infected  during transmission.  As the recipient you assume all responsibility for such actions opening at your own risk.  National Travel is not liable for any loss or damage arising from this message or its attachments.