如何从API调用中选择单个JavaScript对象/ JSON项目

Posted 2023-01-13

我已经设法从API调用中获取数据，这些数据已经设法显示在表格中。现在，当您单击表格的某些项目时，我想显示该项目的更详细视图。

因此，当我打开链接localhost：4200 / detail / 12时，我想显示id = 12的对象中的数据。但是我不知道该怎么做。

我目前从people.component.html获得这样选定的人的ID

...
        <tr *ngFor="let data of data" routerLink="/detail/data.regulation_id">
            <td>data.person_id</td>
            <td>data.name</td>
        </tr>
...

API的数据为JSON格式：

["person_id":"1","name":"Tom","person_id":"2","name":"Clarissa","person_id":"4","name":"Micky",...]

但是显示的（在浏览器中）数据被记录为javascript对象：

0:
   person_id: 1
   name: "Tom"
2:
   person_id: 2
   name: "Clarissa"
3:
   person_id: 4
   name: "Micky"
...

因此，我该如何调整people-detail.component.ts以仅显示所选项目的数据（例如，person_id = 12）而不显示所有项目（当前发生的事情？）]

这是我的people-detail.component.ts当前的样子

...
export class PeopleDetailComponent implements OnInit 
public data: any = []
  public selected: any=[]
  constructor(
    public http: HttpClient, 
    private route: ActivatedRoute)  

getData()
    const person_id = +this.route.snapshot.paramMap.get('person_id');
    const url ='http://localhost:4000/api/allpeople'
    this.http.get(url).subscribe
      (data => this.data = data);
    console.log(person_id)
  

  ngOnInit() : void
    this.getData()
  

答案

我会使用解析器。

路由

首先声明详细视图的路径：

const routes: Routes = [
  
    path: 'detail/:id',
    component: PersonComponent,
    resolve:  message: PersonResolver 
  
];

解析器

您可以在想要获取人员详细信息的任何地方使用解析器（可重用的在加载组件之前获取数据的方式

然后在路径上创建解析器：

import  Injectable  from '@angular/core';
import  Resolve, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot  from '@angular/router';

import  of  from "rxjs";
import  delay  from "rxjs/operators";

@Injectable()
export class PersonResolver implements Resolve<Person> 

  constructor(private route: ActivatedRoute) 
  

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
    const id = route.paramMap.get('id');
    const url = 'your url here';
    return this.http.get(url);
  

更多详细信息

• 我假设您需要创建一个PersonComponent，并单击一个人之后要转到的人详细信息。
• 我假设您要在使用另一个URL时显示另一个组件的详细信息。

另一答案

您必须创建数据接口：

export interface iUsers 
    person_id: string;
    name: string;

然后您必须将代码更改为：

public data: iUsers[]  = []
 this.http.get<iUsers[]>(url).subscribe((res)=>
    this.data = res
    console.log(this.data)
    )

另一答案

如下设置点击侦听器。

    <table>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let data of data" (click)="onClickHandler(data.person_id)">
        <td>data.person_id</td>
        <td>data.name</td>
    </tr>
</tbody>
</table>

这会将所选项目的ID传递到处理程序方法。具有所选ID的对象将存储在“ selected”变量中。

onClickHandler(id)

    this.selected=this.data.find(item=>
    if(item['id']===id)
    
        return true;
    
    return false;
);