title: angular 2 how to assign an array of JSON response using Observable and map in typescript interface and retrieve in html using *ngFor?
body: <pre><code>export interface Relation{
  name: string;
  address: string;
  dob: number;
  }
  </code></pre>
  
  <p>My JSON response is </p>
  
  <pre><code>[ {"name":"John", "address":"xyz", "dob":"2000-01-10"},
  {"name":"Jamie", "address":"abc", "dob":"1990-01-10"}
  ]
  </code></pre>
  
  <p>This is not mapping the response to the Interface! That;s the problem.</p>
  
  <pre><code>relations:Relation []=[];
  getRelations() : Observable&lt;Relation[]&gt; {
     return this.http.get('url for json response').map(this.extractData).do(data=&gt;console.log("Get all responses"+JSON.stringify(data))).catch(error =&gt; this.errorMessage = error);
  }
  
  extractData( response : Response){
  let body = response.json();
  console.log("Body", body);
  return body.data;
  }
  </code></pre>
  
  <p>i call the get Relations but get nothing !</p>
  
  <pre><code>ngOnInit(){
     this.getRelations().subscribe(relations=&gt; relations, error=&gt; this.errorMessage=&lt;any&gt;error);
  }
  </code></pre>
  
  <p>When i try to retrieve the data in HTML as a table row i get nothing! Which means either the Relation[] array is not initialized itself or i'm missing something here.</p>
  
  <p>when i do this i get nothing !</p>
  
  <pre><code>&lt;tr *ngFor="let row of relations"&gt; 
  &lt;td&gt; row.name&lt;/td&gt;
  &lt;td&gt; row.address&lt;/td&gt;
  &lt;td&gt; row.dob&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>