title: Angular 2 - Cannot read property '0' of undefined error with context ERROR CONTEXT: [object Object]
body: <p>my service is like this </p>
  
  <pre><code>getRecords(): Observable&lt;any&gt;{
      return this.http.get(this.fetchAdminData)
                      .map(this.extractData)
                      .catch(this.handleError);
    }
  </code></pre>
  
  <p>and Extract data is as following </p>
  
  <pre><code>private extractData(res: Response) {
      let body = res.json();
      return body || { };
    }
  </code></pre>
  
  <p>In my component i am calling this as follows</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core'
  import {FormsHandler} from '../services/service.forms'
  
  
  @Component({
    selector: 'form-admin',
    templateUrl: '../partials/form5.html'
  })
  
  export class FormAdminComponent implements OnInit {
    public records
    constructor(private formHandler : FormsHandler){
    }
  
    ngOnInit(){
      this.formHandler.getRecords().subscribe(res =&gt; {
        if (res.ok){
          this.records = res.data
          console.log(res)
          console.log(this.records[0])
        }
      })
    }
  
  }
  </code></pre>
  
  <p>But when this is called on as follows in html it errors </p>
  
  <pre><code>{{records}} // this is working perfectly 
      {{records[0]}}  //Cannot read property '0' of undefined ERROR CONTEXT:    [object Object]
  </code></pre>
  
  <p>also i even cannot access my nested object like this</p>
  
  <pre><code>&lt;tr *ngFor="let record of records"&gt;
                &lt;td&gt;{{record.firstName + " "+ record.middleName+ " "+ record.LastName}}&lt;/td&gt;
                &lt;td&gt;{{record.BankingDetails.company}} &lt;/td&gt; // This results in errorTypeError: Cannot read property 'company' of undefined
                &lt;td&gt;{{record.BankingDetails}} &lt;/td&gt; //working fine but resulting in [object Object]
  
                &lt;td&gt;Pending&lt;/td&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>results in TypeError: Cannot read property 'company' of undefined</p>
  
  <p>my response is like this</p>
  
  <pre><code>Object {ok: true, data: Array[2]}
  </code></pre>
  
  <p>and complete data is like this :</p>
  
  <pre><code>[
   {
  "Address": {
  "addressLine1":  "nh" ,
  "addressLine2":  "nghn" ,
  "city":  "ngh" ,
  "formStatus": 2 ,
  "pinCode":  "ngh" ,
  "state":  "nghn"
  } ,
  "BankingDetails": {
  "bankName":  "csdcss" ,
  "company":  "cd" ,
  "designation":  "kn" ,
  "loanAmount":  "csd" ,
  "loanPurpose":  "cs" ,
  "panCardNumber":  "84894848" ,
  "salary":  "55"
  } ,
  "contact":  "vsd" ,
  "date":  "vsd" ,
  "dob": Mon Jan 01 1 00:00:00 GMT+00:00 ,
  "email": abhishek@gmail.com, »
  "firstName":  "cs" ,
  "firstname":  "" ,
  "formStatus": 3 ,
  "gender":  "male" ,
  "id":  "98fd72b9-62fe-4fcd-90d6-f2a5f83c052b" ,
  "isAdmin": 1 ,
  "lastName":  "vs" ,
  "lastname":  "" ,
  "middleName":  "vds" ,
  "middlename":  "" ,
  "month":  "vsd" ,
  "password": &lt;binary, 60 bytes, "24 32 61 24 31 30..."&gt; ,
  "username":  "" ,
  "year":  "vs"
  },
  ...
  ]
  </code></pre>
  
  <p>i did't getting what am i doing wrong becuase its working fine with console.log and printing a json but is not accessible with html </p>
  
  <p>also i noted that when i am using </p>
  
  <pre><code>{{records}} 
  </code></pre>
  
  <p>its resulting in [object Object]</p>
  
  <p>i have to explicitly write</p>
  
  <pre><code>{{records | json}}
  </code></pre>
  
  <p>to get my complete data</p>
  
  <p>Hey please suggest me what i am doing wrong i want to access my nested elements like records.BankingDetails.company </p>