dev-resources.site

for different kinds of informations.

Angular - Rxjs - Operator map

Published at

6/29/2022

Categories

3 categories in total

Author

15 person written this

ricardojavister

open

Transforms each item from an source by using a projection function and emit a result as an observable.

Let me show you an example:

I created an Api in jsonbin.io and it is returning this json:

{
    "record": [
        {
            "name": "Pineapple",
            "description": "There are many variations of passages of Lorem.",
            "price": 650,
            "image": "https://images.unsplash.com/photo-1587883012610-e3df17d41270?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
        },
        {
            "name": "Orange",
            "description": "There are many variations of passages of Lorem.",
            "price": 350,
            "image": "https://images.unsplash.com/photo-1577234286642-fc512a5f8f11?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"
        },
        {
            "name": "Grapes",
            "description": "There are many variations of passages of Lorem.",
            "price": 120,
            "image": "https://images.unsplash.com/photo-1577069861033-55d04cec4ef5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        },
        {
            "name": "Morron",
            "description": "There are many variations of passages of Lorem.",
            "price": 75,
            "image": "https://images.unsplash.com/photo-1525607551316-4a8e16d1f9ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=710&q=80"
        },
    ],
    "metadata": {
        "id": "62b9ef87192a674d291cb521",
        "private": true,
        "createdAt": "2022-06-27T17:57:27.165Z"
    }
}

Firts, I show all the products at the left side and when the user clicks over an specific product, it will map the product selected at the right side.

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs';
import { Record } from 'src/app/model/record';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-operator-map',
  templateUrl: './operator-map.component.html',
  styleUrls: ['./operator-map.component.scss'],
})
export class OperatorMapComponent implements OnInit {
  records: Record[] = [];
  record!: Record;
  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts(): void {
    this.productService.getProducts().subscribe((data) => {
      this.records = data.record;
    });
  }

  mapRecord(value: number) {
    this.productService
      .getProducts()
      .pipe(map((x) => x.record))
      .subscribe((data) => {
        this.record = data[value];
      });
  }
}

Live Demo
Download Code

operators Article's

30 articles in total

Essential MySQL Operators and Their Applications

read article

Exposing replica nodes in Percona Operator for PostgreSQL

read article

It’s just ‘,’ – The Comma Operator

read article

Operators, Conditionals and Inputs

read article

Practical Guide to Python Conditional Statements