How can I access nested nodes in JSON data? I've managed to retrieve the parent level, but when trying to access nested/sub-records, I'm getting [object Object],[object Object],[object Object]. Any suggestions on how to display another ul-li for assigned_to with multiple records?
db.json
"users": [
{
"id": 1,
"first_name": "Male",
"last_name": "Record",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600d010c054e1205030f120420070d01090c4e030f0d">[email protected]</a>",
"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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e781828a868b82c99582848895883a78898c8288c08c8088">[email protected]</a>",
"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");
}
}
Output: https://i.sstatic.net/RcfJS.png