switchMap for flattening in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the operator used for flattening inner observables.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

AswitchMap

Bmap

Cfilter

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'map' instead of 'switchMap'.

Forgetting to import from 'rxjs/operators'.

The switchMap operator is imported from rxjs/operators to flatten inner observables.

2fill in blank

medium

Complete the code to use switchMap to flatten the inner observable returned by getData().

Angular

this.data$ = this.input$.pipe([1](value => this.getData(value)));

Drag options to blanks, or click blank then click option'

Amap

Bfilter

CswitchMap

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' which does not flatten observables.

Using 'filter' which filters values but does not flatten.

switchMap is used here to switch to the observable returned by getData(value) and flatten it.

3fill in blank

hard

Fix the error in the code by replacing the incorrect operator with switchMap to flatten the inner observable.

Angular

this.result$ = this.source$.pipe([1](val => this.fetchDetails(val)));

Drag options to blanks, or click blank then click option'

Atap

Bfilter

Cmap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' which returns nested observables.

Using 'filter' which does not transform observables.

switchMap is the correct operator to flatten the inner observable returned by fetchDetails(val).

4fill in blank

hard

Fill both blanks to create an observable that uses switchMap to flatten and then map to transform the data.

Angular

this.final$ = this.input$.pipe([1](val => this.apiCall(val)), [2](data => data.result));

Drag options to blanks, or click blank then click option'

AswitchMap

Bfilter

Cmap

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' instead of 'switchMap' first, causing nested observables.

Using 'filter' instead of 'map' for transformation.

First, switchMap flattens the inner observable from apiCall. Then, map transforms the emitted data to data.result.

5fill in blank

hard

Fill all three blanks to create a pipeline that filters input, flattens with switchMap, and taps to log the result.

Angular

this.process$ = this.source$.pipe([1](val => val > 10), [2](val => this.loadData(val)), [3](res => console.log(res)));

Drag options to blanks, or click blank then click option'

Afilter

BswitchMap

Ctap

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' instead of 'filter' for the first step.

Using 'map' instead of 'switchMap' for flattening.

Using 'map' instead of 'tap' for logging.

The pipeline first filters values greater than 10, then uses switchMap to flatten the observable from loadData, and finally uses tap to log the results without affecting the stream.