javascript - Angular: Error trying to diff '[object Object]'. Only arrays and iterables are allowed - Stack Over

admin管理员组

文章数量:1391991

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",
  ],
}

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",
  ],
}

• javascript
• angular
• typescript

Share Improve this question Follow asked Dec 13, 2021 at 18:04 LearnerCodeLearnerCode 18911 gold badge77 silver badges1818 bronze badges 1

• 1 It is quite obvious that logList is not an array. – R. Richards Commented Dec 13, 2021 at 18:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

*ngFor doesn't let you iterate Objects. What should it iterate, the keys of the object, or the values?

I'm guessing that if you ran:

this.fileUploadService.getLogs(numOfLogs).subscribe(
    data =>  { console.log(typeof data); this.logList = data;},
);

It would log 'object'.

If you want to iterate an object in the template, you can either convert it to an array/iterable in the .ts file and use that instead:

let iterableLogList = Object.keys(this.logList);

or you can pipe this.logList into Angular's builtin keyvalue pipe.

*ngFor="let item of logList | keyvalue"

you shouldn't need to import anything new to use that. Now, the key of each item will be available in the template as item.key, and likewise the value will be available as item.value.

None of these solutions worked for me. I figured the error came up (in my case) because the array was empty (I was checking values which would get assigned after an http service call returned). All I needed do was use a conditional clause:

            <tbody *ngIf="logList">
                <tr *ngFor="let item of logList">
                ...

本文标签：