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

Question

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

It is quite obvious that logList is not an array.

R. Richards
– R. Richards

2021-12-13 18:10:33 +00:00
Commented Dec 13, 2021 at 18:10 — R. Richards
– R. Richards, Commented Dec 13, 2021 at 18:10

abhishek sahu · Accepted Answer · 2021-12-13 18:12:55Z

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>

answered Dec 13, 2021 at 18:12

abhishek sahu

6484 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

abhishek sahu Over a year ago

loop on td instead of tr.

LearnerCode Over a year ago

Thanks. I just noticed that. Hence why i deleted that comment. However, its seems everything is now in one row. I.e. it comes out {Success,Success,Success} for one column. And the column and values pairs in the table don't match. How would i force that change?

abhishek sahu Over a year ago

ok, if it solved your problem accept the answer which will be helpful for others as well.

LearnerCode Over a year ago

Sure. But are able to help to advise on the second issue?

abhishek sahu Over a year ago

for that, you should map loglist data to an array of objects in ts file using the Map operator.

Nicholas Hayashi · Accepted Answer · 2021-12-13 18:11:05Z

1

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

answered Dec 13, 2021 at 18:11

Nicholas Hayashi

1125 bronze badges

1 Comment

LearnerCode Over a year ago

Thank you. I went with the kevalue pipe option. However, its seems everything is now in one row. I.e. it comes out {Success,Success,Success} for one column. And the column and values pairs in the table don't match. How would i force that change?

Cedric Ipkiss · Accepted Answer · 2023-06-30 11:26:17Z

0

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

answered Jun 30, 2023 at 11:26

Cedric Ipkiss

6,5457 gold badges52 silver badges79 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related