Angular 2 - Cannot read property '0' of undefined error with context ERROR CONTEXT: [object Object]
<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>