Angular2 Cannot find a differ supporting object of type 'string'. NgFor only supports binding to Iterables such as Arrays

Question

I'm trying to get data from another view, like this:

    this.paramsSub = this.activatedRoute.params.subscribe(params => this.categories = params['obj']);
this.paramsSub = this.activatedRoute.params.subscribe(params => this.userInfo = params['usr']);

The data is sended in this way:

this.router.navigate(['/path/obj', {obj: this.categories, usr: this.userInfo}]);

I'm trying to show categories with a *ngFor in html like this:

<div *ngFor="let category of categories">
        <input type="checkbox" value={{category.id}}/> {{category.name}} 
    </div>

My error:

 Cannot find a differ supporting object '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

I go to another view good, but IDK why my error, if I try to: JSON.parse the error change to

Unexpected token o in JSON at position 1
Error: Error in :0:0 caused by: Unexpected token o in JSON at position 1

I have been reading about that error and it's look like I don't need the parse, so I'm very confusing.

Help, and thank you!

UPDATE

Here is the data before go to another view.

Can you share your data that is being passed. Pl. put that in question not in comment — Smit
you can stringfy ur object first and send over to the params. and then once u receive it... parse it. — Smit

Smit Smit · Accepted Answer · 2017-03-09T03:35:08

this.router.navigate(['/path/obj', {obj: JSON.stringfy(this.categories), usr: JSON.stringfy(this.userInfo)}]);

This means now you can the object without any worry! :)

this.paramsSub = this.activatedRoute.params.subscribe(params => this.categories = JSON.parse(params['obj']));
this.paramsSub = this.activatedRoute.params.subscribe(params => this.userInfo = JSON.parse(params['usr']));

You may choose to do parsing, it is not necessary as, it is already in JSON format. It will parse for you.[automatically] :)

For more analysis and reading: Angular 2: Passing Data to Routes?

Angular2 Cannot find a differ supporting object of type 'string'. NgFor only supports binding to Iterables such as Arrays

1 Answers