I have created a new Angular component with the following code:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-workers-edit',
templateUrl: './workers-edit.component.html',
styleUrls: ['./workers-edit.component.css']
})
export class WorkersEditComponent implements OnInit {
public workerid;
public lastname;
public address;
public phone;
public email;
workers = [];
constructor(private route: ActivatedRoute, private http: HttpClient) { }
ngOnInit() {
let id = parseInt(this.route.snapshot.paramMap.get('id'));
this.workerid = id;
let Workerobs = this.http.get('http://myurlPP/cfcs/workernameapi.cfm');
Workerobs.subscribe((res:any)=> {
console.log(res);
this.workers = res;
});
}
}
The array 'workers' now contains all the information coming from the server: https://i.sstatic.net/BKX4E.png
In my HTML file, I am currently looping through all the names in the 'workers' array like this:
<ul>
<li *ngFor="let name of workers">{{name.WNAME}}</li>
</ul>
However, I need to only display the name that matches the 'workerid' value. This is stored in this.workerid after extracting it from the URL parameter.
How can I filter out the correct object from the 'workers' array based on 'workerid' and display only the corresponding 'WNAME' (worker name)?