WP Rest api featured image problem


#1

Hello,

I am trying to list my posts from my wordpress site in ionic cards, however i have a big problem with the featured images, i just cant show it. I am using the better featured image plugin for wordpress so the image is in my json as you can see:

However when i console log the data i see this:
Képkivágás
ERROR TypeError: Cannot read property ‘source_url’ of null

ts

export class HomePage {
  url: string = 'http://feederhorgasz.000webhostapp.com/wp-json/wp/v2/posts?filter[orderby]=date&order=asc'; 
  items: any; 
  
  
  constructor(public navParams: NavParams,public navCtrl: NavController, private http:Http) {
   
    console.log('Passed params', navParams.data);
  }
  ionViewDidEnter() { 
    this.http.get( this.url ) 
    .map(res => res.json()) 
    .subscribe(data => 
        {  
         this.items = data; 
         console.log("átadott wp api",data);
         
        }); 
        
   }

html

<ion-card ion-item *ngFor="let item of items">
    <ion-card-content>
      <ion-item>
        <h2>{{item.title.rendered}}</h2>
        <p>November 5, 1955</p>
      </ion-item>

      <img src="{{item.better_featured_image.source_url}}"/>

      <ion-card-content>
        {{item.excerpt.rendered}}
      </ion-card-content>

      <ion-row>
        <ion-col>
          <button ion-button icon-left clear small>
              <ion-icon name="thumbs-up"></ion-icon>
              <div>12 Likes</div>
            </button>
        </ion-col>
        <ion-col>
          <button ion-button icon-left clear small>
              <ion-icon name="text"></ion-icon>
              <div>4 Comments</div>
            </button>
        </ion-col>
        <ion-col center text-center>
          <ion-note>
            11h ago
          </ion-note>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

#2

The first two screenshots show two different entries. Compare the “date” values, they don’t match.