How to apply filter and map in a pipeline for specific data processing

Question

Can i know How to apply filter and map in a pipeline for specific data processing?

Answer 1

In RxJS, filter is used to remove unwanted values, and map transforms the remaining values. They can be chained together in a pipeline for efficient data processing.

Example: Filtering and Mapping API Response

import { HttpClient } from '@angular/common/http';

import { Component } from '@angular/core';

import { map, filter } from 'rxjs/operators';

@Component({

  selector: 'app-example',

  template: `<p>Check console for filtered and transformed data</p>`,

})

export class ExampleComponent {

  constructor(private http: HttpClient) {

    this.fetchUsers();

  }

  fetchUsers() {

    this.http.get<{ id: number; name: string; age: number }[]>('https://api.example.com/users')

      .pipe(

        filter(users => users.length > 0), // Ensures data is not empty

        map(users => users.filter(user => user.age > 18)), // Filters users older than 18

        map(users => users.map(user => user.name.toUpperCase())) // Converts names to uppercase

      )

      .subscribe(filteredUsers => console.log('Processed Users:', filteredUsers));

  }

}