Angular 4 services local json file shows undefined results - json

Question

I have created a service named User.service.ts and inside i have written this code:
getContactDetials(){
return this.http.get(this.config.apiUrl + 'assets/data/contact-details.json')
.map(response => response.json());
}
And when i am trying to access the content using this service in contact.component.ts then strangely i am not able to see any results. For further investigation i have logged in the console then the results shows as 'undefined'.
The code for my contact.component.ts is:
contactDetails: any[];
constructor(private _userService: UserService) {
console.log('Contact Tab is pressed!!');
}
ngOnInit() {
this._userService.getContactDetials()
.subscribe(data => this.contactDetails = data.results);
console.log(this.contactDetails);
}
The template where i am binding the data is :
<tbody>
<tr *ngFor="let item of contactDetails">
<td>{{ item.field_email }}</td>
<td>{{ item.field_first_name }}</td>
<td>{{ item.field_last_name }}</td>
<td>{{ item.field_mobile }}</td>
<td>{{ item.field_department }}</td>
<td>{{ item.field_contact_email_address }}</td>
<td>{{ item.field_mobile_1 }}</td>
</tr>
</tbody>
But unfortunately i am not able to display the data in the table. Can anybody help me? What is the mistake i made?
Thanks

Answer 1

If 'data.results' shows undefined, then may if you try to log only 'data' would give you some insights to what you are receiving on the other end.