The inner map function isn't being executed in Rxjs

Question

The inner map function isn't being executed in Rxjs

I have written some code that utilizes two pipes to load a product instance along with its playlist. In case there is an error while loading the playlist, the property is set to null:

getProduct(productId: number): Observable<ProductDTO> {
    return this.internalFindOne(productId).pipe(
      flatMap((productDTO: ProductDTO) => {
        return this.productPlaylistService.getProductPlaylist(productId).pipe(
          map((productPlaylistDTO: ProductPlaylistDTO) => {
            productDTO.playlist = productPlaylistDTO;
            return productDTO;
          }),
          catchError(() => {
            // If product playlist doesn't find anything, we still have to return the product dto object
            productDTO.playlist = null;
            return of(productDTO);
          }),
        );
      })
    );
}

As it currently stands, everything works fine. However, I am unsure about using flatMap in this context. While there are no compiler errors, based on my understanding, flatMap operates in a 1:n manner, whereas map does so in a 1:1 fashion. The code expects a productDTO as input and returns the modified productDTO. When I replace the flatMap with just map, the nested map function isn't called (neither the success nor error parts).

The classes ProductDTO and ProductPlaylistDTOare not iterable.

Could someone help me understand what I might be missing here?

typescript rxjs nestjs

Answer 1

Answer №1

The flatMap operator has a 'flat' prefix because it flattens the observable it returns. This means that instead of getting the observable itself, you will receive the data from the returned observable. It essentially removes one level of nested observables. Its functionality is quite similar to switchMap. For more information on the differences between them, check this post.

In contrast, map solely transforms the data. If you return an observable from the `map()` function, you will get that observable as the result:

internalFindOne(productId).pipe(
  flatMap(() => {
    return getProductPlaylist(productId);
  }),
  tap((additionalData: ProductPlaylistDTO) => { ... })
);

internalFindOne(productId).pipe(
  map(() => {
    return getProductPlaylist(productId);
  }),
  tap((additionalData$: Observable<ProductPlaylistDTO>) => { ... })
);

However, in this scenario where the two requests are independent of each other, you can execute them concurrently using combineLatest:

getProduct(productId: number): Observable<ProductDTO> {
  return combineLatest([
    this.internalFindOne(productId),
    this.productPlaylistService.productPlaylistService(productId).pipe(
      catchError(() => {
        return of(null);
      })
    ),
  ]).pipe(
    map(([ product, playlist ]) => {
      product.playlist = playlist;
      return product;
    })
  );
}

Check out this StackBlitz

Answer 2

The flatMap operator has a 'flat' prefix because it flattens the observable it returns. This means that instead of getting the observable itself, you will receive the data from the returned observable. It essentially removes one level of nested observables. Its functionality is quite similar to switchMap. For more information on the differences between them, check this post.

In contrast, map solely transforms the data. If you return an observable from the `map()` function, you will get that observable as the result:

internalFindOne(productId).pipe(
  flatMap(() => {
    return getProductPlaylist(productId);
  }),
  tap((additionalData: ProductPlaylistDTO) => { ... })
);

internalFindOne(productId).pipe(
  map(() => {
    return getProductPlaylist(productId);
  }),
  tap((additionalData$: Observable<ProductPlaylistDTO>) => { ... })
);

However, in this scenario where the two requests are independent of each other, you can execute them concurrently using combineLatest:

getProduct(productId: number): Observable<ProductDTO> {
  return combineLatest([
    this.internalFindOne(productId),
    this.productPlaylistService.productPlaylistService(productId).pipe(
      catchError(() => {
        return of(null);
      })
    ),
  ]).pipe(
    map(([ product, playlist ]) => {
      product.playlist = playlist;
      return product;
    })
  );
}

Check out this StackBlitz

The inner map function isn't being executed in Rxjs

Answer №1

Similar questions

What is the best way to merge the results of several runs of an observable function

unanticipated installation issue with published npm package on verdaccio

Receiving undefined when subscribing data to an observable in Angular

Using Cypress and JWT, automate the login process for JHipster

Utilizing TypeScript in conjunction with Vue and the property decorator to assign default values to props

Form validation is an essential feature of the Angular2 template-driven sub form component

Creating React Context Providers with Value props using Typescript

Return the subclass from the constructor function

After subscribing, my Angular template fails to refresh

Creating a TypeScript mixin with a partial class is a useful technique that allows you to

Unable to retrieve this information within an anonymous function

Unleashing the power of storytelling with React: A guide to creating dynamic story

How can I specify the parameter type as "any object value" in TypeScript?

Utilizing Database values in .css files with Vue.js and TypeScript

Using TypeScript to create a generic function that returns a null value

Does anyone have experience using the useRef hook in React?

Creating TypeScript modules for npm

Undefined value is returned for Vue 3 object property

What are the TypeScript type definitions for the "package.json" configuration file?

Angular 7 compile error NG8002: Unable to bind object as it is not recognized as a valid property