WP rest api image display error

#1

I used wp rest api to display posts, posts are displaying but when I am trying to display image I am getting an error of ERROR TypeError: Cannot read property ‘0’ of undefined
my codes are below, guys help me out

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card *ngFor="let item of items">
  <img src="{{item._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url}}"/>
  <ion-card-content>
    <ion-card-title>
      {{item.title.rendered}}
      </ion-card-title>
  </ion-card-content>
</ion-card>

</ion-content>

api.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ApiProvider {

	private API_URL:string = 'http://myurl.com/wp-json/wp/v2/';
	public Categories:any = [];
	constructor(public http: HttpClient) {
  }
  
  get(query:string = '') {
	  return this.http.get(this.API_URL + query);
  }
  
  getCategories(){
	  this.get('categories').subscribe((data) => {
		  this.Categories = data;
	  });
  }

}

home.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {ApiProvider } from '../../providers/api/api';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

	public items: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, public api:ApiProvider) {
	  console.log(this.navParams.get('cat_id'));
	  this.getPosts();
  }
  
  getPosts() {
	  this.api.get('posts?_embed').subscribe((data) => {
		  this.items = data;
	  });
  }
}

Can you guys help me out?

#2

<img *ngIf=“item.featured_media > 0” src="{{item._embedded[‘wp:featuredmedia’][0].media_details.sizes.medium.source_url}}"/>

1 Like
#3

Thanks, Buddy
It Really Works for me