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

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.

so what you want is "when the user click on a user the list of the user disappear and only this user show" ? — Ahmed Eid, Apr 03 '22 at 16:15
So basically when I enter the abovementioned page, I get the list of all the users. I need to get only one insted of all. I hope that helped you understand my problem — Nicik, Apr 03 '22 at 16:19
what do you use to choose the specific user you need ?! do you have the id for the user you want or anything to identify the user when you get to this page ? — Ahmed Eid, Apr 03 '22 at 16:24
I am not sure about that. I was told to do three things. on the first page there should be a list of users. That was no problem. The second was that when you push the user button you should get the user info and the posts button. Then when you push the posts button you should get the posts of that persons posts — Nicik, Apr 03 '22 at 16:39
I'll provide the stackblitz link to make it easier to understand: https://stackblitz.com/edit/github-jqhjqc?file=src%2Fapp%2Fuserposts%2Fuserposts.component.ts — Nicik, Apr 03 '22 at 16:40
Do you think you could help? It would mean a lot. Thanks in advance. — Nicik, Apr 03 '22 at 16:57
first thing i found `[routerLink]="['/userinfo/ + obj.name']"` i think you mean `[routerLink]="['/userinfo', d.name]"` — Ahmed Eid, Apr 03 '22 at 17:01
is the solution is not clear or are you facing any problems? — Ahmed Eid, Apr 03 '22 at 17:19

Ahmed Eid · Accepted Answer · 2022-04-03T17:58:19.067

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);
    });
  }
}

It stopped giving me all the users info but now I get bank buttons. Can you explain what can I do to fill these spaces? — Nicik, Apr 03 '22 at 17:49
just use this line instead ` [this.user] = data.filter((user) => user.id == userID);` it was returing any array of length 1 and you need the object inside the array — Ahmed Eid, Apr 03 '22 at 17:58
here a link with a working code: https://stackblitz.com/edit/github-jqhjqc-nxpk2o?file=src/app/userinfo/userinfo.component.ts — Ahmed Eid, Apr 03 '22 at 17:59

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

1 Answers1