Can't get the specific user information to be displayed on the page in Angular - json

Question

I have come across the problem, namely I cannot get the program to display the info of the specific user when clicking on it. The best I could manage is the displaying of every user together. Can you help me with this problem?
Here is the code:
service.ts :
import { Injectable } from '#angular/core';
import {HttpClient} from '#angular/common/http'
import {Observable} from 'rxjs';
# Injectable({providedIn: 'root'})
export class JSONPlaceholderpostsService {
constructor(private http: HttpClient) { }
getData():Observable<any> {
const url = "https://jsonplaceholder.typicode.com/users"
return this.http.get<any>(url)}}
The Component.ts:
import { Component, OnInit } from '#angular/core';
import { JSONPlaceholderpostsService } from 'src/app/posts/jsonplaceholderposts.service';
# Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css']})
export class UserinfoComponent implements OnInit {
data:Array<any>
constructor(private JSONPlaceholder: JSONPlaceholderpostsService,){
this.data = new Array<any>()}
ngOnInit(): void {this.getUserInfoFromAPI()}
getUserInfoFromAPI(){
this.JSONPlaceholder.getData().subscribe((data) => {
console.log(data)this.data = data})}
And the component.html file:
<p>USER INFO</p>
<ul *ngFor="let element of data">
<li><button (click)="getUserInfoFromAPI()">{{element.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.adress}}</button></li>
</ul>
<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>
Thank you all in advance
what I want to happen is that instead of the list of every user just the specific user info to be displayed.

Answer 1

here how I may make it work
for the route I will use the id instead of the name
{path: 'userinfo/:id', component: UserinfoComponent}
and then for useInfo, I will take the user id from the route and filter the list to to get the user and then use this user
Html
<p>USER INFO</p>
<ul >
<li><button (click)="getUserInfoFromAPI()">{{user.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.adress}}</button></li>
</ul>
<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>
and ts
import { Component, OnInit } from '#angular/core';
import { JSONPlaceholderpostsService } from '../posts/jsonplaceholderposts.service';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css'],
})
export class UserinfoComponent implements OnInit {
user: any = '';
constructor(private JSONPlaceholder: JSONPlaceholderpostsService, private route: ActivatedRoute) {
}
ngOnInit(): void {
this.getUserInfoFromAPI();
}
getUserInfoFromAPI() {
this.JSONPlaceholder.getData().subscribe((data) => {
const userID = this.route.snapshot.paramMap.get('id') || "";
[this.user] = data.filter((user) => user.id == userID);
});
}
}