Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
90
rated 0 times [  91] [ 1]  / answers: 1 / hits: 8750  / 3 Years ago, mon, december 13, 2021, 12:00:00

I am trying to iterate through an Object that I receive through a service call and then placing this iteration onto a table using *ngFor.


However I receive the following error when trying to do so.


Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I understand you can't iterate through an Object but when I was trying to look for a solution it didn't quite make sense to me. Please see my code below, any help will be greatly 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",
],
}

More From » angular

 Answers
6

use keyValue pipe since loglist is not a array , below code will solve your problem


            <tbody>
<tr>
<td *ngFor="let item of logList | keyvalue"">{{ item.value}}</td>
</tr>
</tbody>

[#588] Sunday, December 5, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
rocioblancac

Total Points: 699
Total Questions: 96
Total Answers: 108

Location: Libya
Member since Mon, Dec 7, 2020
4 Years ago
rocioblancac questions
;