Getting json object data into html front end in Angular

Question

I am returning a JSON array Object from an external API which I want to show in the HTML view on Angular front-end. But the view is not loading with below error

Output in console

ERROR Error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." ERROR CONTEXT Object { view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…} }

getGifs() {
this.getData().subscribe(data => {
  console.log(data);
  this.data = data;
})
}

In console logs I can see result as,

data: Array(25) [ {…}, {…}, {…}, … 
meta: Object { status: 200, msg: "OK", response_id:       "5cea7c49386968693259fc04" }
pagination: Object { total_count: 2447, count: 25, offset: 0 }
<prototype>: Object { … }

How can I read this data variable in my HTML page. Tried iterating with ngfor but it fails.

data: (25) […] 0: Object { type: "gif", id: "bVeC916JLikZG", slug: "steve-carell-bVeC916JLikZG", … } 1: Object { type: "gif", id: "jHF49Bz9btG1O", slug: "jHF49Bz9btG1O", … } 2: Object { type: "gif", id: "Ij1cbMbIWDKDK", slug: "get-reasons-mcadams-Ij1cbMbIWDKDK", … } 3: Object { type: "gif", id: "l0IsIk6AUy69wVU2c", slug: "snl-saturday-night-live-ryan-gosling-l0IsIk6AUy69wVU2c", … } 4: Object { type: "gif", id: "wMvESGxZ0Cqd2", slug: "frustrated-ryan-gosling-wMvESGxZ0Cqd2", … } — Sourav Mehra
– Sourav Mehra, Commented May 26, 2019 at 15:40

Sajeetharan · Accepted Answer · 2019-05-26 15:54:20Z

1

You should assign the data property of the response to render on the HTML,

this.data = data.data;

and render in HTML as

  <ul>
    <li *ngFor="let item of data">
       {{item.type}}. {{item.slug}}
    </li>
  </ul>

EDIT

this.getData().subscribe((data:any) => {
  console.log(data);
  this.data = data.data;
})

edited May 26, 2019 at 15:54

answered May 26, 2019 at 15:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

9 Comments

Sourav Mehra Over a year ago

this.data = data.data? data property wont exist on data right?

Sajeetharan Over a year ago

As i see your response contains the data property

Sourav Mehra Over a year ago

But it doesn't show. I changed method as below, getGifs() { this.getData().subscribe(data => { console.log(data); this.data = data.data; }) } But it gives error property 'data' does not exist on type 'Object'

Sajeetharan Over a year ago

change .subscribe((data:any) =>

Sourav Mehra Over a year ago

See the data variable declared was data : any ={}; constructor(private httpClient : HttpClient) { console.log("Hello"); this.getGifs(); this.getData(); } getData() { return this.httpClient.get(this.searchapiUrl); } getGifs() { this.getData().subscribe(data => { console.log(data); this.data = data.data; }) } If I change as you said it still gives the same error.

|

Collectives™ on Stack Overflow

Getting json object data into html front end in Angular

1 Answer 1

9 Comments

Hot Network Questions