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.

Answer 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;
})