I am working on a function called getLocationForEquipment, which is meant to take an array of observable locations, filter them based on a locationid parameter, and then return the location name for that specific location. I need to figure out how to utilize pipe, map, filter, and subscribe in order to retrieve this specific value.
import { LocationService } from 'src/app/services/location.service';
import { Equipment } from 'src/app/models/equipment';
import { Observable } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit} from '@angular/core';
import { EquipmentService } from 'src/app/services/equipment.service';
import { RentService } from 'src/app/services/rent.service';
import { AccountService } from 'src/app/services/user.service';
import { Location } from 'src/app/models/location';
import {map} from 'rxjs/operators';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
loading: boolean = false;
submitted: boolean = false;
openQrCode: boolean = false;
enterPinCode: boolean = false;
QrCode!: string;
equipments: Observable<Equipment[]>
locations!: Observable<Location[]>
constructor(
public locationService: LocationService,
public accountService: AccountService,
public equipmentService: EquipmentService,
public rentService: RentService,
) {
this.equipments = equipmentService.getAllEquipment(this.accountService.user.organizationid)
this.locations = locationService.getAllLocations(this.accountService.user.organizationid)
}
ngOnInit() {
}
getLocationForEquipment(equipid: number) {
this.locations.pipe (
map(items => {
items.filter(item => item.id === equipid)
}
))}
onOpenQrScanner() {
this.openQrCode = true;
}
scanSuccessHandler(scanValue: string) {
console.log(scanValue)
this.enterPinCode = true;
this.QrCode = scanValue;
console.log(scanValue)
return this.scanSuccessHandler
}
scanErrorHandler(scanError: any) {
console.log(scanError)
}
}
HTML:
<ion-item-group>
<ion-card *ngFor="let equipment of equipments | async">
<ion-card-title class="class-title">{{getLocationForEquipment(equipment.locationid)}}</ion-card-title>
<ion-card-subtitle class="class-subtitle">{{equipment.description}}</ion-card-subtitle>
</ion-card>
</ion-item-group>
export class Location {
id!: number;
organizationid!: number;
name!: string;
description!: string;
active!: boolean;
}