Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

Question

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

I am currently working on creating a unique in-memory singleton that stores the vendor being viewed by a user.

A guard is implemented on all specific routes to capture the parameter:

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean | UrlTree> {

  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  return this._vendorService.getByName(param).pipe(map(a => {
    if (a == null) {
      this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
      return this._router.parseUrl(currentUrl);
    }
    return true;
  }));
}

A service is utilized to fetch the vendor by name. If it's present in memory, it's directly returned. Otherwise, it's fetched from the server first.

set vendor(value: IUser) {
  this._vendor.next(value);
}

get vendor$(): Observable<IUser> {
  return this._vendor.asObservable();
}

getByName(name: string): Observable<IUser> {
  const result = this.vendor$.pipe(map(v => {
    if (v != null && v.displayName == name) {
      return v;
    }
    else {
      return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(v => {
        this.vendor = v;
        return of(v)
        // ...
      }));
    }
  }))
  return result;
}

The issue lies in the fact that I need to verify vendor$ for its value returning an Obervable<IUser>, but the switchMap also provides an Obervable<IUser>, resulting in

Observable<Observable<IUser>>

. How can I ensure that the result only returns a single User Observable?

angular typescript rxjs rxjs-observables switchmap

Answer 1

Answer №1

It seems there may be a misunderstanding regarding the usage of switchMap(). It is not the reason for your

Observable<Observable<IUser>>

issue. The first map() operator inside the getByName() function is responsible for either returning a value of type IUser (true) or an observable of IUser (false). Therefore, getByName() will return either Observable<IUser> or

Observable<Observable<IUser>>

.

If you are looking to leverage replaying in-memory values from an observable, I recommend using shareReplay(). Here's a suggested pattern for such a scenario.

private vendorName = new Subject<string>();

public vendor$ = this.vendorName.pipe(
  distinctUntilChanged(),
  switchMap(name=>this.Get<IUser>(`api/vendor/${name}`)),
  shareReplay(1)
)

public getByName(name:string){
  this.vendorName.next(name);
}

Then, in the guard file:

canActivate(
  // ...
){
  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  this._vendorService.getByName(param);

  return this._vendorService.vendor$.pipe(
    map(vendor=>{
      if(!vendor){
        this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
        return this._router.parseUrl(currentUrl);
      }
      return true;
    })
  );

With this setup, your component(s) and guard can subscribe to vendor$ to access the required IUser data. When you have the vendor name to retrieve, simply call getByName(). This will trigger the following steps:

The userName subject will emit the new name.
The vendor$ observable (subscribed to userName) will use that name to fetch the value from the inner observable (the Get method).
The shareReplay(1) ensures that any subscription to vendor$ (current or future) will receive the last emitted value stored in memory.

To update the vendor name, simply call getByName() with the new name, and all subscriptions to vendor$ will automatically reflect the updated value.

Answer 2

It seems there may be a misunderstanding regarding the usage of switchMap(). It is not the reason for your

Observable<Observable<IUser>>

issue. The first map() operator inside the getByName() function is responsible for either returning a value of type IUser (true) or an observable of IUser (false). Therefore, getByName() will return either Observable<IUser> or

Observable<Observable<IUser>>

.

If you are looking to leverage replaying in-memory values from an observable, I recommend using shareReplay(). Here's a suggested pattern for such a scenario.

private vendorName = new Subject<string>();

public vendor$ = this.vendorName.pipe(
  distinctUntilChanged(),
  switchMap(name=>this.Get<IUser>(`api/vendor/${name}`)),
  shareReplay(1)
)

public getByName(name:string){
  this.vendorName.next(name);
}

Then, in the guard file:

canActivate(
  // ...
){
  let currentUrl = this._router.url;
  const param = route.params['vendname'];

  this._vendorService.getByName(param);

  return this._vendorService.vendor$.pipe(
    map(vendor=>{
      if(!vendor){
        this._snackBarService.open('Vendor not found', 'x', { duration: 5000 });
        return this._router.parseUrl(currentUrl);
      }
      return true;
    })
  );

With this setup, your component(s) and guard can subscribe to vendor$ to access the required IUser data. When you have the vendor name to retrieve, simply call getByName(). This will trigger the following steps:

The userName subject will emit the new name.
The vendor$ observable (subscribed to userName) will use that name to fetch the value from the inner observable (the Get method).
The shareReplay(1) ensures that any subscription to vendor$ (current or future) will receive the last emitted value stored in memory.

To update the vendor name, simply call getByName() with the new name, and all subscriptions to vendor$ will automatically reflect the updated value.

Answer 3

Answer №2

in my observation, the vendor$ appears to be a sequence of IUser. To enhance your code, I suggest utilizing the iif rxjs operator for subscribing to either the first or second observable based on a specific condition.

 this.vendor$.pipe(
    mergeMap(v => iif(
      () => v && v.displayName == name, of(v), this.Get<IUser>(`url`).pipe(tap(v => this.vendor = v))
     )
    )
  )

Answer 4

in my observation, the vendor$ appears to be a sequence of IUser. To enhance your code, I suggest utilizing the iif rxjs operator for subscribing to either the first or second observable based on a specific condition.

 this.vendor$.pipe(
    mergeMap(v => iif(
      () => v && v.displayName == name, of(v), this.Get<IUser>(`url`).pipe(tap(v => this.vendor = v))
     )
    )
  )

Answer 5

Answer №3

Here is an additional solution that I found effective:

When dealing with the canActivate method that also returns a Promise, you can take advantage of the reliable async and await approach.

It's worth noting that in rxjs 7, the toPromise method has been replaced by lastValueFrom.

async getUserByVendorName(name: string): Promise<IUser> {
  const user:IUser = await new Promise(resolve => { 
    this.vendor$.subscribe(data => {
      if (data != null && data.displayName.toLocaleLowerCase() == name) {
        resolve(data);
      }
    });
    // Resolve with null if no matching data is found
    resolve(null);
  });

  if (user == null) {
    return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(result => {
      this.vendor = result;
      return of(result);
    })).toPromise();

  }
  return Promise.resolve(user);
}

Answer 6

Here is an additional solution that I found effective:

When dealing with the canActivate method that also returns a Promise, you can take advantage of the reliable async and await approach.

It's worth noting that in rxjs 7, the toPromise method has been replaced by lastValueFrom.

async getUserByVendorName(name: string): Promise<IUser> {
  const user:IUser = await new Promise(resolve => { 
    this.vendor$.subscribe(data => {
      if (data != null && data.displayName.toLocaleLowerCase() == name) {
        resolve(data);
      }
    });
    // Resolve with null if no matching data is found
    resolve(null);
  });

  if (user == null) {
    return this.Get<IUser>(`api/vendor/${name}`).pipe(switchMap(result => {
      this.vendor = result;
      return of(result);
    })).toPromise();

  }
  return Promise.resolve(user);
}

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

Answer №1

Answer №2

Answer №3

Similar questions

Angular is giving me a hard time setting my background image

Using RxJS to merge various HTTP requests into a unified and flattened observable array

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

What could be causing TypeScript to throw errors when attempting to utilize refs in React?

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

default selection in angular 2 dropdown menu

Unusual behavior exhibited by ng-if within a widget

Tips for avoiding a React component from causing the page to freeze post-loading

In order for the expansion parameter to be successfully used, it must be either of tuple type or passed to the

Retrieve the data in JSON format including the child elements from a PostgreSQL

Implementing generics in TypeScript for objects made easy with this guide!

The cdkDropListSortingDisabled attribute is not recognized as a valid property for the cdkDropList directive in Angular Material

Why are the tabs in Angular displaying differently when the tab titles exceed 8 characters with Bootstrap 5?

A peculiar quirk with Nuxt.js radio buttons: they appear clickable but are somehow not disabled

What is the best way to retrieve information from my Angular 2 component while I am already within my Kendo Grid?

Mastering the application of map, filter, and other functions in Angular using Observables

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

Navigating through multiple checkbox values in Angular 4/5

The parameter failed to initialize causing the HTTP service to fire prematurely

Apply a border to the div that has been selected