I need help iterating through an Object received from a service call and displaying it in a table using *ngFor.
Unfortunately, I encounter the following error during this process:
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
I am aware that you cannot iterate through an Object directly, but I couldn't find a solution that made sense to me. Please take a look at my code below and any assistance would be highly appreciated :
.ts
searchValue: string = "3";
logList: any = [];
getLogs() {
const numOfLogs = new FormData();
numOfLogs.append('n_log', this.searchValue)
this.fileUploadService.getLogs(numOfLogs).subscribe(
data => {this.logList = data},
);
}
html
<table class="table table-striped" style="width:1000px;table-layout:fixed;font-size:10px;color:black;">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>FilePath</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of logList">
<td>{{ item.Name}}</td>
<td>{{ item.Date}}</td>
<td>{{ item.FilePath}}</td>
<td>{{ item.Updated}}</td>
</tr>
</tbody>
</table>
console.log(this.logList)
{
"Name": [
"name1",
"name2",
"name3"
],
"Date": [
"2021-12-13",
"2021-12-12",
"2021-12-11"
],
"FilePath": [
"FileName1.xlsx",
"FileName2.xlsx",
"FileName3.xlsx",
],
"Updated": [
"2021-12-31T00:00:00",
"2021-12-31T00:00:00",
"2021-12-31T00:00:00",
],
}