Angular - Rxjs - Operator map

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