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?