ngFor throw error on passing an array

Question

I have the object Categories(id, name), I get like this on Angular:

this.categories = new Array<Category>(); this.http .get(ApiConfig.API_URL + 'getCategories') .toPromise() .then(response => this.categories = response.json()) .catch(_ => console.log("error getting categories"));

The object Categories.ts:

export class Category { constructor( public id: string, public name: string) { } }

And I am trying to put them as options on autocomplete field like this:

<div> <md-form-field> <input type="text" mdInput [mdAutocomplete]="auto"> </md-form-field> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let category of categories"> {{ category.name }} </md-option> </md-autocomplete> </div>

But I get the following error

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

I tried with

<md-option *ngFor="let category of categories" [value]="category.id" [label]="category.name">

But it still throwing the same error, what am I doing wrong?

Can you change .then(response => this.categories = response.json()) to .then(response => { this.categories = response.json(); console.log(%O, this.categories); }) and show us the output? — Z. Bagley
– Z. Bagley, Commented Sep 4, 2017 at 19:59
I am not sure if it's related to your issue, but your class properties are not correctly declared. put public id: string, public name: string outside of the constructor. — Vega
– Vega, Commented Sep 4, 2017 at 20:35
@Vega, there is nothing wrong with that declaration. That is absolutely correct code. Imagine injecting a service in constructor, but you are able to use that throughout the class. This is similar. — FAISAL
– FAISAL, Commented Sep 4, 2017 at 20:41

FAISAL · Accepted Answer · 2017-09-04 20:44:04Z

Looking at the json you commented, you need to iterate over categories.result. Change your *ngFor to following:

 <md-option *ngFor="let category of categories.result"> {{ category.name }} </md-option>

Ajinkya Dhote · Accepted Answer · 2017-09-04 19:59:52Z

0

Add a console.log(this.categories) where you are getting your response and then see what's being assigned to categories. I am sure that you parsing it in wrong way.

answered Sep 4, 2017 at 19:59

Ajinkya Dhote

1,4883 gold badges14 silver badges26 bronze badges

4 Comments

FAISAL Over a year ago

You should write that as a comment or support your answer with an example.

Cristophs0n Over a year ago

Not enough rep for a comment I think

Juanker Over a year ago

I got this: {"result":[{"id":1,"name":"Football"},{"id":2,"name":"Basketball"},{"id":3,"name":"Rugby"}],"id":175,"exception":null,"status":5,"isCanceled":false,"isCompleted":true,"creationOptions":0,"asyncState":null,"isFaulted":false}

Ajinkya Dhote Over a year ago

Greate !! you then have to use this.categories.result to access your data instead of this.categories...

Collectives™ on Stack Overflow

ngFor throw error on passing an array

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related