0

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>
Improve this question
7
  • You have to convert data to array. Use maybe map and the iterate with ngFor Commented Jun 25, 2018 at 12:49
  • Possible duplicate of Error trying to diff '[object Object]' Commented Jun 25, 2018 at 12:54
  • Possible duplicate of stackoverflow.com/questions/44574249/… Commented Jun 25, 2018 at 12:56
  • How to do that?@Cristian Commented Jun 25, 2018 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 Commented Jun 25, 2018 at 12:59
Related questions
3
How to read youtube data api v3 response in php
3
How can I embed youtube Link from JSON file
0
JSON WP API Video Embed Ionic
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.