Binding data [object object] in angular

Question

I got data like this in my console from my API:

[
    {
        id:"123",
        name:"asd",
        address:"st.dddss",
        status:1
    }
]

I call it using ngFor and I got this error:

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

But that still works and data is showing. This is my code:

this._service
    .getHotelbyId(this.id)
    .subscribe(hotel =>
        {
          this.Hotels = hotel
          console.log(this.Hotels);
        },
        error =>
        {
            console.log(error);
        })

And I call it like this using *ngFor

*ngFor="let z of Hotels

{{z.name}} , {{z.address}}

How to solve that error message?

i got this [{id:"123",name:"asd",address:"st.dddss",status:1}] — Shaugi
– Shaugi, Commented Feb 2, 2018 at 17:00

Nabin Paudyal · Accepted Answer · 2018-02-02 17:10:22Z

0

I believe this error is because you assigned the JSON string response you obtained from your api to this.Hotels.

You need to parse the JSON string as your Javascript object. Try this.

this.Hotels = JSON.parse(hotel)

Hope this helps.

answered Feb 2, 2018 at 17:10

Nabin Paudyal

1,6399 silver badges14 bronze badges

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

Comments

Shaugi · Accepted Answer · 2018-02-02 17:41:45Z

0

problem solved just remove ngFor and use index of array like this Hotels[0].name link

answered Feb 2, 2018 at 17:41

Shaugi

5392 gold badges8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Binding data [object object] in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related