I'm struggling to showcase nested JSON data retrieved from my backend server in a table format.
Below is the JSON structure:
{
"id": 1,
"personalData": {
"firstName": "Bob",
"lastName": "Bobby",
"personalIdNumber": 852963
},
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a57574c575a5775575a571b565a571b565a">[email protected]</a>",
"correspondenceAddress": {
"addressLine1": "Sesame Street",
"addressLine2": "1",
"addressLine3": "2",
"city": "Disney",
"province": "Cartoons",
"zipCode": "01-234"
},
"companyId": 265385,
"active": true
}
I aim to exhibit the firstName, lastName, email, companyId, and active fields in a tabular form.
Here is the method used to fetch data:
getData(): void {
this.service.getAll()
.subscribe((data) => {
this.dataList = data;
},
error => console.log(error)
);
}
And here is the HTML code for the table:
<div class="table-responsive">
<table class="table" *ngIf="dataList && dataList">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>E-Mail</th>
<th>Company ID</th>
<th>Active?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of dataList">
<td>{{data.firstName}}</td>
<td>{{data.lastName}}</td>
<td>{{data.email}}</td>
<td>{{data.companyId}}</td>
<td>{{data.active ? "True" : "False"}}</td>
<td>
<button class="btn btn-primary" (click)="openDetails()">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
The PersonalData and CorrespondenceAddress sections will always be singular. How can I efficiently interpret them and present in the table?