CODEWITHSUNDEEP
angularrxjs
alex
alex

Reputation: 414

How to transfer an object with data from a subscribed subscribe

There is a getUser function in the UserDataService service, in which I call the tokens function, get a token and pass it to another getUser function, from which I get a user by his id.

getUser(id: number) {
  return this.sharedDataService.tokens.subscribe((result) => {
    return this.userService
      .getUser(result, id)
      .subscribe((resultService: DataResponse<User>) => {
        if (resultService.status === StatusType.SUCCESSFUL) {
          return resultService.data;
        } else {
          return null;
        }
      });
  });
}

export interface User{
  id: number;
  name: string;
}

How do I get a User object when calling this function? This code will not work.

let user = this.userDataService.getUser(1);

How to correctly pass objects from such functions? You can transmit by event, but in this case it is not very convenient. Maybe you can subscribe to the get User function?

Upvotes: 0

Views: 74

Answers (2)

Amer
Amer

Reputation: 6706

In similar cases, it's recommended to return the Observable itself (instead of subscribing to it within the service), and then subscribe to it within the components.

You can try the following:

import { map, switchMap } from 'rxjs/operators';

getUser(id: number): Observable<User | null> {
  return this.sharedDataService.tokens.pipe(
    switchMap((result) => this.userService.getUser(result, id)),
    map((resultService: DataResponse<User>) => {
      if (resultService.status === StatusType.SUCCESSFUL) {
        return resultService.data;
      } else {
        return null;
      }
    })
  );
}

And within the component class, you can get the user object like the following:

this.userDataService.getUser(1).subscribe((user) => {
  // You can use the `user` here...
  console.log(user);
});

Or you can assign the getUser result to a new Observable in the component class, then use it (subscribe to it) in the component template using async pipe, like the following:

// Component class:
user$: Observable<User>;

ngOnInit(): void {
  this.user$ = this.userDataService.getUser(1);
}

<!-- Component template -->
<div *ngIf="user$ | async as user">
  <!-- You can use `user` object here -->
  <span>{{ user.name }}</span>
</div>

Upvotes: 2

Juan Vicente Berzosa Tejero
Juan Vicente Berzosa Tejero

Reputation: 3022

It depends on your code, but I guess you should do something like this:

import { switchMap, map, tap } from 'rxjs/operators';
... 
getUser(id: number) {

   return this.sharedDataService.tokens
   .pipe(
      switchMap(token => this.userService.getUser(token, id)),
      tap(
         (resultService: DataResponse<User>) => {

            if (resultService.status === StatusType.SUCCESSFUL) {
              return resultService.data;
            } else {
              return null;
            }

      }),
    );

You also can type your function, depending on what resultService.data type is.

For instance, if resultService.data is User type, you can type your function as:

getUser(id: number): Observable<User|null> {

Upvotes: 1

Related Questions