Using Map operator in Angular

The Angular observable Map operator takes an observable source as input. It applies a project function to each of the values emitted by the source observable and transforms it into a new value. It then emits the new value to the subscribers. We use a Map with a Pipe, which allows us to chain multiple operators together. In this guide, we’re going to learn how to use the Map operator with examples like converting the source to upper case, Using Map the Angular HTTP Request, with DOM events, filtering the input data, and using multiple Maps together, etc.

Syntax

The syntax of the map operator is as follows.

map<T, R>(project: (value: T, index: number) => R, thisArg?: any): OperatorFunction<T, R>

project: is a function that we use to manipulate the values emitted by the source observable. The project can accept two arguments. one is value i.e. the value emitted by the observable. The second argument is index number. The index number starts from 0 for the first value emitted and incremented by one for every subsequent value emitted. It is similar to the index of an array.

thisArg: is optional and default is undefined.It defines what this is in the project function.

Using Observable Map

To use map first we need to import it from the rxjs/operators library.

import { map } from 'rxjs/operators'

Next, create an observable from array of numbers as shown below.

srcArray = from([1, 2, 3, 4]);

Use the pipe method to and invoke the map method.

  multiplyBy2() {
    this.srcArray
    .pipe(map(val => { return val * 2}))
    .subscribe(val => { console.log(val)})
  }

The project function accepts only one argument val and returns it multiplied by 2.

map(val => { return val * 2})

Finally, we subscribe and print the result in console. The output is 2,4,6,8

The following image explains how values from the source observable ( i.e.1,2,3,4 ) go through the map which transforms it into new values by multiplying it by 2.

You can also access the second argument index as shown below. It starts as 0 for the first value and gets incremented for every subsequent value

  multiplyBy2() {

    this.srcArray
      .pipe(map((val, i) => {         //index
        console.log(i)                //0
        return val * 2;
      }))
      .subscribe(val => { console.log(val) })
  }

Map Examples

Convert input to upper case

srcName$ = from(['John', 'Tom', 'Katy'])

toUpperCase() {
  this.srcName$
   .pipe(map(data => {
     return data.toUpperCase();
   }))
   .subscribe(data => console.log(data))
}

Map to a Single Property

srcObject = from([
  { fName: 'Sachin', lName: "Tendulkar" },
  { fName: 'Rahul', lName: "Dravid" },
  { fName: 'Saurav', lName: "Ganguly" },
]);


MapToSingleProperty() {
  this.srcObject
   .pipe(map(data => { return data.fName + ' ' + data.lName }))
   .subscribe(data => { console.log(data) })
}

//output
Sachin Tendulkar
Rahul Dravid
Saurav Ganguly

Using Map with HTTP Request

The following code gets the list of dogs breeds from the https://dog.ceo/api/breeds/list/all API and uses the keyValue pipe to transform the object into an array of key-value pairs.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Observable, from, pipe, fromEvent } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators'
import { HttpClient } from '@angular/common/http';
import { KeyValuePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [KeyValuePipe]
})
export class AppComponent implements OnInit {

constructor(private http: HttpClient,
             private keyValue: KeyValuePipe) {
 }

@ViewChild('btn', { static: true }) button: ElementRef;

  $dogsBreed(): Observable<any> {
    return this.http.get<any>("https://dog.ceo/api/breeds/list/all")
  }

  getDogsBreed() {

    this.$dogsBreed()
      .pipe(map(data => {
        var dogs = this.keyValue.transform(data.message)
        console.log(dogs)
      }))
      .subscribe();

  }
}

Using with event

You can create observable from event and use the map to transform the values.

  buttonClick() {
    fromEvent(this.button.nativeElement, 'click')
        .pipe(map( ev => (ev as any).clientX))
        .subscribe(res => console.log(res));
  }

map with filter

srcArray = from([1, 2, 3, 4]);

  filterWithMap() {
    this.srcArray
    .pipe(
      filter(val => {
        return val > 2;
      }),
      map((val, i) => {
        return val * 2;
      }))
    .subscribe(val => { console.log(val) })
  }

Multiple map

The following examples shows use of multiple map functions. The first map adds 10, while the second mad multiplies by 2.

  mulitpleMaps() {
    this.srcArray
    .pipe(
      map(val => {
        return val + 10;
      }),
      map((val, i) => {
        return val * 2;
      }))
    .subscribe(val => { console.log(val) })
  }

References

1. Map API