Encountering an "object undefined" error when trying to access the object of the Service Component. Interestingly, hard coding the data directly into a JavaScript variable works fine and shows the type as "object Array."
Data.json
[
{
"id": 1,
"name": "Malad",
"gateway": "10.10.100.1",
"device": "cisco"
}, {
"id": 2,
"name": "Kandhivali",
"gateway": "222.30.100.1",
"device": "Juniper"
}
]
DataService.ts
import {Injectable} from 'angular2/angular2'
import {Http} from 'angular2/http';
@Injectable()
export class DataService {
tdata = [
{
"id": 1,
"name": "Malad",
"gateway": "10.10.100.1",
"device": "cisco"
}, {
"id": 2,
"name": "Kandhivali",
"gateway": "222.30.100.1",
"device": "Juniper"
}
];
data;
constructor(http: Http){
http.get('Data.json')
.toRx()
.map(res => res.json())
.subscribe(res => this.data= res);
}
}
DataPage.ts
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {DataService} from './DataService'
@Component({
selector: 'DataPage'
})
@View({
template: `
{{data | json}} //Working fine //object Array
<br>
{{data | json}} //Not working // object Undefined //No data :(
`
directives: [CORE_DIRECTIVES]
})
export class DataPage{
query;
tquery;
constructor( public dataService:DataService){
this.query = dataService.data; // object Undefined
this.tquery = dataService.tdata; //object Array
}
}