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?"

score 2 · Accepted Answer · answered Apr 18 '17 at 23:35

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>

score 0 · Answer 2 · edited May 23 '17 at 12:25

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 '17 at 12:25

Community

1
1

answered Apr 18 '17 at 23:11

Ahmed Musallam

9,523
4
27
47

am i accessing the display response rightly tho please? – Apr 18 '17 at 23:15
whta's `forward`? more importantly what is `this.http` ? – Ahmed Musallam Apr 18 '17 at 23:18
forward is a function in my service.ts – Apr 18 '17 at 23:23
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 https://angular.io/docs/ts/latest/guide/server-communication.html – Ahmed Musallam Apr 18 '17 at 23:34

Iterating through Object (data) - Angular

2 Answers2