How to display youtube json data in ionic3 using php

Question

I got youtube json data and saved it in http://localhost/jsonyoutube.php.

Now I want to display json data in ionic view page (i.e., home.html)

When I tried,I got error: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

But when I tried In console it works well.I cant able to display it in view page

Here I share my codes

home.ts

     load() : void
    {
  this.http
  .get('http://localhost/jsonyoutube.php')
  .subscribe((data : any) =>
   {
     //console.dir(data.items["0"].snippet.thumbnails.default.url);
     console.dir(data);
     this.items = data;
     //console.dir(this.items);
   },
  (error : any) =>
  {
     console.dir(error);
  });
  }

home.html

  <ion-content padding style="background-color: #251D32 !important;">
  <ion-grid >
  <ion-row>
   <ion-col col-6 col-md-4 col-xl-3 *ngFor="let item of items">
    <ion-card class="video-container">
     <iframe src="https://www.youtube.com/embed/{{item.id.videoId}}" 
    frameborder="0" width="100%" height="315" allowfullscreen></iframe>
        </ion-card>
  </ion-col>  
  </ion-row>
  </ion-grid>  
  </ion-content>

You have to convert data to array. Use maybe map and the iterate with ngFor — , Jun 25 '18 at 12:49
Possible duplicate of [Error trying to diff '\[object Object\]'](https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object) — , Jun 25 '18 at 12:54
Possible duplicate of https://stackoverflow.com/questions/44574249/angular4-error-trying-to-diff-object-object — , Jun 25 '18 at 12:56
@ Vignesh Ram I don't know how is made your items, but basically create and empty array and the push data.items into it. Then in html iterate with ngFor — , Jun 25 '18 at 12:59
https://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/ — , Jun 25 '18 at 13:06

How to display youtube json data in ionic3 using php

0 Answers0