从许多json数据中过滤

Question

我有一个带有网格的组件，可以显示人名。当我单击一行时，我会导航到另一个包含此人姓名和其他数据的组件。

我的目标是创建卡片来展示与特定人员相关的所有项目以及项目名称。我从一个 JSON 文件中获取所有信息作为我的数据库。这是数据库结构的示例：

"collaborateurs": [
    {
      "id": "1",
      "lastName": "Rami",
      "firstName": "Romain",
      "team": ".NET",
      "dateStart": "2021-01-01",
      "dateEnd": "2021-01-05",
      "project": 5,
      "TOG": 40,
      "dayLeft": -5
    },
    {
      "id": "2",
      "lastName": "Doe",
      "firstName": "John",
      "team": "Frontend",
      "dateStart": "2022-03-15",
      "dateEnd": "2022-08-31",
      "project": 3,
      "TOG": 20,
      "dayLeft": 10
    }
],
"project": [
    {
      "id": "1",
      "client": "Client A",
      "project": "Projet 1",
      "type": "Type A",
      "status": "En cours",
      "dayHuman": "5",
      "team": ".Net",
      "dateStart": "2024-01-01",
      "dateEnd": "2024-12-31"
    },
    {
      "id": "2",
      "client": "Client B",
      "project": "Projet 2",
      "type": "Type B",
      "status": "Terminé",
      "dayHuman": "10",
      "team": ".Net",
      "dateStart": "2024-02-01",
      "dateEnd": "2024-11-30"
    }
],
  "teams": [
    {
      "id": "1",
      "teamName": ".Net",
      "collabId": [
        "1",
        "2",
        "3"
      ],
      "projectId": [
        "1",
        "2",
        "3",
        "4",
        "5"
      ]
    }
]

在这个特定场景中，我想检索与 Rami 相关的所有项目。为了实现这一目标，我需要确定 Rami 正在合作的团队，找到与该团队相关的项目，最后返回与这些项目相关的客户名称。

这就是我获取和使用我的数据的方式：

export class CollabDetailsComponent {
    route: ActivatedRoute = inject(ActivatedRoute);
    appService = inject(AppService);
    iCollab: ICollab | undefined;
    iProject: IProject[] = [];

    projectList: IProject[] = [];

    iTeams: ITeams[] = [];

    constructor() {
        const icollabId = Number(this.route.snapshot.params['id']);

        this.appService.getCollabById(icollabId).then((collab) => {
            this.iCollab = collab;
        });

        this.appService.getAllProject().then((projectList: IProject[]) => {
            this.projectList = projectList;
        });

        this.appService.getAllTeams().then((teamList: ITeams[]) => {
            this.iTeams = teamList;
        });
    }
}

目前，我可以显示我选择的个人的所有相关数据。然而，我在尝试展示他们的项目时遇到了困难，因为项目数据驻留在单独的数据库中。

我尝试了多种解决方案，包括：

<ng-container *ngFor="let iProject of projectList">
    <div class="card" *ngIf="iTeams && iTeams[0]?.teamName == iProject?.team">
        <h3>{{ iProject?.client }}</h3>
        <p>{{ iTeams[0].collab }}</p>
    </div>
</ng-container>

<div class="card" *ngFor="let iProject of projectList; where: iCollab?.lastName == iTeams?.collab; and: iTeams?.teamName == iProject?.team">
    <h3>{{ iProject.client }}</h3>
    <p>{{ iProject.project }}</p>
</div>

...还有很多，但没有一个达到预期的结果。可用的选项要么显示数据库中的所有项目，要么留下空卡，要么什么都不留下。

我相信问题的根源可能是数据结构，因为人员的姓名及其项目是按数组排列的。

我该如何解决这个问题？

Answer 1

您可以为团队和用户创建一个地图，如下所示。因此您可以检查特定用户是否存在于特定团队中。

public teamUsersMap = {};
....
constructor(){
    for(let i=0;i<this.teams.length;i++){
        const team = this.teams[i];
 
        // Add Team to map if not present
        if(!teamUsersMap[team.teamName])
            teamUsersMap[team.teamName] = {};
    
        for(let j=0;j<this.teams[i].collabId.length;j++){
            const collabId = this.teams[i].collabId[j];
        
            // Add User to team map if not present
            if(!teamUsersMap[team.teamName][collabId])
                teamUsersMap[team.teamName][collabId] = 1;
        }
    }
}

现在在你的html中你可以检查如下

<div class="card" *ngFor="let p of projectList;">
    // below id is Rami's id
    <ng-container *ngIf="teamUsersMap[p.team][id]">
        <h3>{{ iProject.client }}</h3>
        <p>{{ iProject.project }}</p>
    </ng-container>
</div>

通过在初始阶段像这样格式化和存储数据，您可以避免额外的循环并提高性能。