如何解决用于数据表角度的API中的嵌套数组json
我在角度上有问题,我有一个API返回嵌套数组。我想获取该数据以构建角度数据表。但是我尝试使用ngFor嵌套循环和其他方式,但是直到现在我仍无法获得结果
我拥有的API是这个
{
"data": [
{
"attendances": [
{
"employee": "08850046-WIDI TRI YUWONO","attendance_date": "2020-07-01","attendance_day": "WEDNESDAY","checkin_time": "-","checkin_location": "-","checkout_time": "-","checkout_location": "-","checkin_status": 0
},{
"employee": "08850046-WIDI TRI YUWONO","attendance_date": "2020-07-02","attendance_day": "THURSDAY","checkin_status": 0
}
]
},{
"attendances": [
{
"employee": "93710016-MAYA SETYAWATI",{
"employee": "93710016-MAYA SETYAWATI","checkin_status": 0
}
]
}
}
]
<div class="row">
<div class="col-sm-12">
<app-card cardTitle="{{ 'CHART_COMPONENT.attendance_history' | translate }}" cardClass="card-datatable" headerClass="text-center text-md-left" [hidHeader]="false" [options]="true" [loading]="loadtableEmployeeStaffReport">
<div class="table-responsive pb-1">
<table datatable [dtOptions]="dtOptions" class="table table-bordered table-hover" [dtTrigger]="dtTrigger">
<thead class="thead-light">
<tr>
<th scope="col" style="padding-left: 10px">No.</th>
<th scope="col" style="text-align:center">Employee</th>
</tr>
</thead>
<tbody *ngIf="tableData?.length != 0;">
<tr *ngFor="let data of tableData; let i = index;">
<tr *ngFor="let col of data.attendances; let j = index;"></tr>
<th scope="row" style="padding-left: 10px">{{ j+1 }}</th>
<th scope="row" style="padding-left: 10px">{{ j+1 }}</th>
</tr>
</tr>
</tbody>
<tbody *ngIf="tableData?.length == 0 && !loadtableEmployeeStaffReport">
<tr>
<td colspan="7" class="no-data-available text-center">Data tidak ditemukan!</td>
<td class="hidden"></td>
</tr>
</tbody>
<tbody *ngIf="tableData?.length == 0 && loadtableEmployeeStaffReport">
<tr>
<td colspan="7" class="no-data-available text-center">Loading Data....</td>
<td class="hidden"></td>
</tr>
</tbody>
</table>
</div>
</app-card>
</div>
this.chartService.getEmployeeReportStaff().subscribe(response => {
setTimeout(() => {
this.tableData = response.data;
this.dtTrigger.next();
this.loadtableEmployeeStaffReport = false;
},3000);
}
请给我一些启发,以建立该数据表。我使用component.ts和.html进行查看。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。