title: How to Access JSON Object Properties as table in Angular 2
body: <p>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: </p>
  
  <p><strong>test.component.ts</strong></p>
  
  <pre><code>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 =&gt; this.getData = JSON.stringify(data) 
          );
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>test.service.ts</strong></p>
  
  <pre><code>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 =&gt; res.json())
    }
  
  }
  </code></pre>
  
  <p><strong>test.component.html</strong></p>
  
  <p>In this file, when I use <code>{{getdata}}</code> I get whole JSON object, but when I try to access any of its property I get ERROR </p>
  
  <pre><code>&lt;button (click)="getTest()"&gt;Get Result&lt;/button&gt;
  output: 
  &lt;ul&gt;
  &lt;li&gt;{{ getData[0][time] }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 {  }
  </code></pre>
  
  <p>**Output: **
  <a href="https://i.stack.imgur.com/g0k8K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g0k8K.png" alt="This is my output, and I want to access its individual property (like..email) as list"></a></p>