title: Angular2 Object Undefined
body: <p>Getting "object undefined" while accessing object of Service Component. But hard coded below data to javaScript variable working fine and shows object type "object Array"</p>
  
  <p>Data.json</p>
  
  <pre><code>[
        {
          "id": 1,
          "name": "Malad",
          "gateway": "10.10.100.1",
          "device": "cisco"
        }, {
          "id": 2,
          "name": "Kandhivali",
          "gateway": "222.30.100.1",
          "device": "Juniper"
        }
  ]
  </code></pre>
  
  <p>DataService.ts</p>
  
  <pre><code>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 =&gt; res.json())
      .subscribe(res =&gt; this.data= res);
    }
  
  }
  </code></pre>
  
  <p>DataPage.ts</p>
  
  <pre><code>import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
  import {DataService} from './DataService'
  
  @Component({
    selector: 'DataPage'
  })
  @View({
    template: `
  {{data | json}}  //Working //object Array
  &lt;br&gt;
  {{data | json}}  //Not Wokring // 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
  
    }
  }
  </code></pre>