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

Question

I have issue when I try to show array data in standard html table. There is method is soa.service that get data in array.

service.

get(Type: number, Code: string): Observable<Items[]>  {
    var requestOptions = this.authService.requestOptionsWithToken();
    return this.http.get(this.serviceUrl + 'api/Get/' + Type + '/' + Code, requestOptions)
        .map(this.dataService.extractData)
        .catch(this.dataService.handleError);
}

public extractData(res: any) {
    return res.json() || [];
}

component.ts

chaptersItems: Items[] = [];

soaType: number;
soaCode: string = 'en-us';

ngOnInit() {
    this.onGet(this.Type, this.Code);
}

onGet(Type: number, Code: string) {
    this.service.get(Type, Code)
        .subscribe(
        response => {
            this.chaptersItems = response;
            console.log(this.chaptersItems);
        });

chapter.component.html

    <table>
            <tr *ngFor="let item of chaptersItems">
                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
            </tr>
        </table>

Explosion Pills · Accepted Answer · 2018-02-05 15:55:38Z

1

Your API returns something like { enabled: true, soaChapters: [] }. The array you want to iterate over is soaChapters. There are several different ways to handle this, but I would do:

this.soaChaptersItems = response.soaChapters;

The error you're getting about diff [object Object] is that Angular is trying to iterate over an object, but that's not allowed. In this case you're trying to iterate over the wrong thing.

answered Feb 5, 2018 at 15:55

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

2 Comments

Explosion Pills Over a year ago

That's because you have getSoa returning Observable<Soa[]>. It should be Observable<{ enabled: boolean, soaChapters: Soa[] }>, i.e. it has to do with your type definitions rather than the response.

Explosion Pills Over a year ago

What do you mea you didn't use the call on previous methods? What are you trying to avoid?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related