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

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

CodePudding user response：

*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.

CodePudding user response：

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>