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];
});
}
}
Top comments (0)