I have a nested json returned from an http request
{
"id": 1,
"title": "Tug of war Competition",
"description": "All kerala tug of war chamionship will be held at Kochi , which is organized by YMCA Kochi",
"date": "2017-07-20T12:24:06.887Z",
"event_type": "100 INR- 250 INR",
"street": "Panamapillinagar",
"city": "Kochi",
"state": "Kerala",
"country": "India",
"latitude": 9.9588628,
"longitude": 76.2956985,
"contact_details": [
{
"id": 1,
"primary_number": "99975655532",
"email": "varun@gmail.com",
"secondary_number": "978645321"
}
],
"photos": [],
"category": {
"id": 1,
"name": "Sports"
}
}
In my event-detail.ts file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App } from 'ionic-angular';
import {HappeningService} from '../../providers/event-service';
import {AuthService} from '../../providers/auth-service';
@IonicPage()
@Component({
selector: 'page-event-detail',
templateUrl: 'event-detail.html',
providers: [HappeningService, AuthService]
})
export class EventDetailPage {
public eventId: any;
public event = {};
constructor(public navCtrl: NavController, private app: App, public authService: AuthService, public navParams: NavParams, public eventService: HappeningService) {
this.eventId = navParams.get('eventId');
}
ionViewDidLoad() {
//Check if already authenticated
this.authService.checkAuthentication().then((res) => {
console.log("Already authorized");
this.loadEventDetail(this.eventId);
}, (err) => {
console.log("Not already authorized");
this.app.getRootNav().setRoot("Login");
});
}
loadEventDetail(eventId){
this.eventService.happeningDetails(eventId)
.then(data => {
this.event = data;
console.log(this.event);
});
}
}
I am able to access the data inside the event variable in the html file like
{{ event.tilte}}
{{ event.description}}
But in the case of nested objects I am not able to retrieve data from inner components
{{ event.contact_details.primary_number}}
{{ event.category.name }}
It’s showing undefined property primary number in the console
Any help will be appreciated.I am new to typescript and not able to identify a solution for this