How to Access JSON Object Properties as table in Angular 2 - json

Question

I am new in Angular 2 and trying to access data from API. As Output, I am getting API response on my browser as all JSON objects. But I don't know how to access the individual properties. below is my code:
test.component.ts
import { Component, OnInit } from '#angular/core';
import { HttpTestService } from './http-test.service';
#Component({
selector: 'http-test',
templateUrl: './http-test.component.html',
providers: [HttpTestService]
})
export class HttpTestComponent implements OnInit {
getData:string;
postData: string;
constructor(private _httpService: HttpTestService) { }
getTest(){
this._httpService.getData()
.subscribe(
data => this.getData = JSON.stringify(data)
);
}
ngOnInit() {
}
}
test.service.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class HttpTestService {
constructor(private _http: Http) { }
getData(){
return this._http.get("http://jsonplaceholder.typicode.com/users")
.map(res => res.json())
}
}
test.component.html
In this file, when I use {{getdata}} I get whole JSON object, but when I try to access any of its property I get ERROR
<button (click)="getTest()">Get Result</button>
output:
<ul>
<li>{{ getData[0][time] }}</li>
</ul>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { HttpTestComponent } from './http-test/http-test.component';
#NgModule({
declarations: [
AppComponent,
HttpTestComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
**Output: **

Answer 1

this.getData = JSON.stringify(data) will make your object a string and you can't reach a strings fields like an object. Remove it.
Then you need to reach to time key as a "string"
Try:
<li>{{ getData[0]['time'] }}</li>
or
<li>{{ getData[0]?.time }}</li>
Example: http://plnkr.co/edit/CB3oGppm4fvoEExfDSRc?p=preview

Answer 2

Change Your code in plunker as shown below :
import { Component } from '#angular/core';
import { ConfigurationService } from './ConfigurationService';
#Component({
selector: 'my-app',
template: `
<table>
<tr *ngFor="let data of getData">
<td>{{data.address.street}}</td>
<td>{{data.address.geo.lat}}</td>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
</tr>
</table>
`
})
export class AppComponent {
getData : any[] ;
constructor(private _ConfigurationService: ConfigurationService)
{
console.log("Reading _ConfigurationService ");
//console.log(_ConfigurationService.getConfiguration());
this._ConfigurationService.getConfiguration()
.subscribe(
(data)=> {
this.getData = data;
console.log(this.getData);
},
(error) => console.log("error : " + error)
);
}
}