Attempting to fetch data from an API using key selection but encountering retrieval issues.
File: app/app.component.ts
import {Component, OnInit} from 'angular2/core';
import {Http} from 'angular2/http';
import {httpServiceClass} from './service';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Api} from './api';
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
providers:[httpServiceClass, HTTP_PROVIDERS]
})
export class AppComponent implements OnInit{
private api:Api[];
constructor(private getservice:httpServiceClass){}
ngOnInit(){
this.getservice.httprequest()
.subscribe(data => this.api = data );
}
}
Service file: app/app.service.ts
import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {Api} from './api';
@Injectable()
export class httpServiceClass{
constructor(private http: Http){}
httprequest(): Observable<Api[]>{
return this.http.get('http://date.jsontest.com')
.map(response => response.json());
}
}
API interface in api.ts
export interface Api{
time:string;
date:string;
}
mytemplate.html content:
<h1 >HTTP : {{api|json}}</h1>
Returns the following JSON data:
{"time": "01:52:41 PM", "milliseconds_since_epoch": 1472910761126, "date": "09-03-2016"}
Attempted to select by key:
<h1 >HTTP : {{api.time}}</h1>
Error message in console:
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [api in AppComponent@0:4]