Iterating through Object (data) - Angular

Question

Below is my code and what i am trying to do is subscribe to the data i return after the send function is triggered. Now after subscribing, i assign the data return from my API to the this.Data to pass on to my ngFor to display the my data. But i get the error Error trying to diff '[object Object]'. Could it be i am not reaching the display property in the data or not accepting the data in the right format (object)?

Data: DataLink[] = [];


        Send(){

                this.http.forward(this.info)
                 .subscribe( data => {

                     this.Data = data;


                       console.log(data);
                 }) }

    <div *ngFor="let msg of Data">

      {{msg.display}}


**response**
 data: Array
    0: Object
       display: "How are you?"

user7345776 · Accepted Answer · 2017-04-18 23:35:34Z

2

Simply loop on the keys directly. you should be fine

Send(){

                this.http.forward(this.info)
                 .subscribe( data => {

              Object.keys(data).forEach(key => {

                  this.Data = data[key];

                       console.log(data);
                 }) }

    <div *ngFor="let msg of Data">

      {{msg.display}}
</div>

answered Apr 18, 2017 at 23:35

user7345776

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

Comments

Community · Accepted Answer · 2017-05-23 12:25:42Z

0

The error you are seeing happens because data is an object and ngFor requires an array.

take a look at this answer: Error trying to diff '[object Object]'

Also, see this for angular http service doc/examples https://angular.io/docs/ts/latest/guide/server-communication.html

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 18, 2017 at 23:11

Ahmed Musallam

9,7634 gold badges29 silver badges47 bronze badges

4 Comments

user7489552 Over a year ago

am i accessing the display response rightly tho please?

Ahmed Musallam Over a year ago

whta's forward? more importantly what is this.http ?

user7489552 Over a year ago

forward is a function in my service.ts

Ahmed Musallam Over a year ago

I assume it calls angular's http service get, post ...etc. If that's the case, and you are getting the response you expect from your REST api, then yes, you are doing it correctly. Also, see this for http service doc/examples angular.io/docs/ts/latest/guide/server-communication.html

Collectives™ on Stack Overflow

Iterating through Object (data) - Angular

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related