map operator for transformation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the map operator from RxJS.

Angular

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

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

Amap

Btap

Cfilter

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong operator like filter or tap instead of map.

Forgetting to import from 'rxjs/operators'.

The map operator is imported from rxjs/operators to transform emitted values.

2fill in blank

medium

Complete the code to transform each emitted number by doubling it using map.

Angular

numbers$.pipe([1](x => x * 2)).subscribe(console.log);

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

Afilter

Bmap

Ctap

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter instead of map, which filters values instead of transforming.

Using tap which only performs side effects without changing values.

The map operator applies a function to each emitted value, here doubling each number.

3fill in blank

hard

Fix the error in the code to correctly transform emitted strings to uppercase using map.

Angular

source$.pipe([1](str => str.toUpperCase())).subscribe(console.log);

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

Afilter

BconcatMap

Ctap

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter which filters values instead of transforming.

Using tap which does not change the emitted values.

The map operator transforms each emitted string to uppercase.

4fill in blank

hard

Fill both blanks to create a map operator that adds 10 to each emitted number and then filters out numbers less than 20.

Angular

source$.pipe([1](x => x + 10), [2](x => x >= 20)).subscribe(console.log);

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

Amap

Bfilter

Ctap

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of map and filter.

Using tap instead of filter for filtering.

First, map adds 10 to each number. Then, filter removes numbers less than 20.

5fill in blank

hard

Fill all three blanks to create a map operator that converts strings to lowercase, trims whitespace, and then filters out empty strings.

Angular

source$.pipe([1](str => str.toLowerCase()), [2](str => str.trim()), [3](str => str !== '')).subscribe(console.log);

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

Amap

Cfilter

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using tap instead of map for transformations.

Using map instead of filter to remove empty strings.

The first two map operators transform the strings to lowercase and trim whitespace. The filter removes empty strings.

Practice

1. What does the map operator do in Angular's RxJS pipe()?

easy

A. Delays the emission of values by a set time

B. Filters out values that do not meet a condition

C. Combines multiple streams into one

D. Transforms each emitted value by applying a function to it

Solution

1. Step 1: Understand the purpose of map

   The map operator changes each value emitted by an observable by applying a function to it.

2. Step 2: Compare with other operators

   Unlike filter or combineLatest, map transforms values, not filters or combines streams.

3. Final Answer:

   Transforms each emitted value by applying a function to it -> Option D

4. Quick Check:

   map = transform values [OK]

Hint: Remember: map changes values, filter removes them [OK]

Common Mistakes:

• Confusing map with filter operator
• Thinking map combines streams
• Assuming map delays emissions

2. Which of the following is the correct syntax to use map inside an Angular RxJS pipe()?

easy

A. observable.pipe(map(value => value * 2))

B. observable.map(value => value * 2)

C. observable.pipe(map => value * 2)

D. observable.pipe(map(value, value * 2))

Solution

1. Step 1: Recall RxJS pipe syntax

   The map operator is used inside pipe() with a function: map(value => ...).

2. Step 2: Identify correct function usage

   observable.pipe(map(value => value * 2)) correctly uses map(value => value * 2) inside pipe(). Others misuse syntax or method chaining.

3. Final Answer:

   observable.pipe(map(value => value * 2)) -> Option A

4. Quick Check:

   Correct map syntax = observable.pipe(map(value => value * 2)) [OK]

Hint: Use pipe(map(fn)) not observable.map(fn) [OK]

Common Mistakes:

• Calling map directly on observable without pipe
• Incorrect arrow function syntax
• Passing multiple arguments to map incorrectly

3. Given this code, what will be logged?

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(1, 2, 3).pipe(
  map(x => x + 1)
).subscribe(console.log);

medium

A. 1 2 3

B. 2 3 4

C. [2, 3, 4]

D. Error: map is not a function

Solution

1. Step 1: Understand the source observable

   of(1, 2, 3) emits values 1, then 2, then 3 sequentially.

2. Step 2: Apply the map transformation

   The map adds 1 to each value, so outputs are 2, 3, and 4.

3. Final Answer:

   2 3 4 -> Option B

4. Quick Check:

   Input + 1 = Output [OK]

Hint: map changes each value, so 1 becomes 2, etc. [OK]

Common Mistakes:

• Expecting original values without change
• Thinking output is an array instead of separate logs
• Confusing import syntax causing runtime error

4. Identify the error in this code snippet using map:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(10, 20, 30).pipe(
  map(x => { x * 2; })
).subscribe(console.log);

medium

A. Missing return statement inside map function

B. Incorrect import of map operator

C. Using pipe instead of subscribe

D. of() cannot emit multiple values

Solution

1. Step 1: Analyze the map function body

   The function uses curly braces but does not return a value explicitly, so it returns undefined.

2. Step 2: Understand effect on output

   Because no value is returned, the output will be undefined for each emission, which is likely unintended.

3. Final Answer:

   Missing return statement inside map function -> Option A

4. Quick Check:

   Curly braces need explicit return [OK]

Hint: Use parentheses or return inside braces in map [OK]

Common Mistakes:

• Assuming implicit return with braces
• Importing map incorrectly
• Confusing pipe and subscribe usage

5. You have an observable emitting user objects:

of(
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 30},
  {name: 'Carol', age: 22}
).pipe(
  map(user => /* ??? */)
).subscribe(console.log);

Which map function will transform the stream to emit only the user names in uppercase?

hard

A. user => ({name: user.name})

B. user => user.age.toString()

C. user => user.name.toUpperCase()

D. user => user.name.toLowerCase()

Solution

1. Step 1: Identify desired output

   The goal is to emit only the user names converted to uppercase strings.

2. Step 2: Check each map option

   user => user.name.toUpperCase() converts user.name to uppercase, matching the goal. Others either convert age, return objects, or lowercase names.

3. Final Answer:

   user => user.name.toUpperCase() -> Option C

4. Quick Check:

   Uppercase names = user => user.name.toUpperCase() [OK]

Hint: Pick map that returns uppercase user.name string [OK]

Common Mistakes:

• Returning full user object instead of name
• Using toLowerCase instead of toUpperCase
• Converting age instead of name