如何使用 angular httpModule 访问 json 中的嵌套节点？

Question

我想访问 JSON 中的嵌套节点。我能够获得父级别，但是当我尝试访问 nested/sub-records 时获得 [object Object]、[object Object]、[object Object]。请提出一个解决方案，这样我就可以为 assigned_to 以及多个记录

获得另一个 ul-li

db.json

"users": [
    {
      "id": 1,
      "first_name": "Male",
      "last_name": "Record",
      "email": "male.record@gmail.com",
      "gender": "Male",
      "dob": "01-01-1987",
      "impact": "Not Applicable",
      "score": "Updated",
      "checked": false,
      "assigned_to": [
        {
          "co_score": 54,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score": 20,
          "dl": "CAT2",
          "sub_impact": "Not Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        },
        {
          "co_score":99,
          "dl": "CAT1",
          "sub_impact": "Applicable",
          "comments": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }

      ]
    },
    {
      "id": 2,
      "first_name": "Female",
      "last_name": "Record",
      "email": "female.record@gmail.com",
      "gender": "Female",
      "dob": "31-12-1987",
      "impact": "Not Applicable",
      "checked": false,
      "score": "Updated"
    }
 ]
}

app.component.html

<table class="table table-sm table-responsive">
      <thead>
        <tr>
          <th>
            <input type="checkbox" name="allNonTrades" (change)="selectAllClicked($event)">
          </th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Gender</th>
          <th>DOB</th>
          <th>Impact</th>
          <th>Score</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | tableFilter: form.value | paginate: { id: 'listing_pagination', itemsPerPage: 10, currentPage: page, totalItems: totalRecords }">
          <td><input *ngIf="!isEdit"  name="nontrades" [checked]="user.selected" (change)="changeTradesByCategory($event)" [(ngModel)]="user.checked" type="checkbox" (change)="checkboxClicked()"></td>
          <td>{{user.first_name}}</td>
          <td>{{user.last_name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.gender}}</td>
          <td>{{user.dob}}</td>
          <td>{{user.impact}}</td>
          <td>
            <div [ngClass]="getClass(user)">{{user.score}}</div>
            <div>
              {{user.assigned_to}}
            </div>
          </td>
          <td>
            <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)">Edit</button>
            <button class="btn btn-primary btn-sm btn-sm ml-2" (click)="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

app.component.ts

getLatestUser() {
    this.commonService.getAllUser().subscribe((response) => {
      this.allUser = response;
      this.totalRecords = this.allUser.length;
      this.getApplicableCounts();
      this.allUser.forEach((row: any) => row.checked = false);      
    });
  }
constructor(private commonService: CommonService) {}
  ngOnInit() {
    this.getLatestUser();    
  }

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class CommonService {

  constructor(private http:HttpClient) { }

  getAllUser() {
    return this.http.get("http://localhost:3000/users");
  }
  
}

输出：

Answer 1

使用{{user.score | json}} 并查看结果。您没有提供调试错误的接口。

Answer 2

而不是：

<div>
  {{user.assigned_to}}
</div>

您可以定义另一个 ngFor 并在其中显示您喜欢的任何内容：

<ul>
  <li *ngFor="let assignee of user.assigned_to">{{assignee.dl}} - {{assignee.co_score}}</li>
</ul>

如何使用 angular httpModule 访问 json 中的嵌套节点？

How to access nested nodes in json using angular httpModule?

json

httpclient

typescript

angular