I try to get the highscores from the server using node angular and http request.

I get the JSON file from the server, but I can not access the fields in order to process them in the \*ngFor

I get this error, for the property payload:

```
core.umd.js:3472 EXCEPTION: Error in ./ScoreListComponent class      ScoreListComponent - inline template:18:5 caused by: Cannot read property 'payload' of undefined

```

It does work at the dev-console in the browser using normal java script but not with the given type script variant of it

```
import { Component, Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { FormsModule } from '@angular/forms';
import 'rxjs/add/operator/map';

import { ScoreService } from './score.service';

@Component({
  selector: 'scoreList',
  template: `
      <h2>High Scores</h2>
      <table class="table table-striped">
        <thead>
         <tr>
           <th>Rank</th>
           <th>Name</th>
           <th>Score</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let score of scoreList; let rank = index">
           <td>{{rank + 1}}</td>
           <td>{{score.name}}</td>
           <td>{{score.score}}</td>
         </tr>
       </tbody>
     </table>
     <button
       type="button"
       class="btn btn-success"
       (click)="refresh()">
         refresh
     </button>
      `,
      providers: [ ScoreService ]
})

```

and here 

```
@Injectable()
export class ScoreListComponent {

  scoreList = [];

  constructor(private scoreService: ScoreService) { }

  getScores() {
    return this.scoreService.getScores();
  }

  refresh() {
    console.log('refresh, implement a server refresh method')

    this.getScores().map(response => response.json()).subscribe(
      response => this.scoreList.push(response)
    )
    console.log(this)
      console.log(this.scoreList);
      let temp = []
      temp = this.scoreList
      console.log(temp[0].payload.scores)
      //console.log(this.scoreList.entries())

    for(let entry of this.scoreList.entries()){
      console.log(entry);
    }
  }

}
  /* API
  scoreList = [
    { name: "Tom", score: 26, timeStamp: "2016-12-30T10:45:41.062Z" },
    { name: "Joe", score: 23, timeStamp: "2016-12-30T10:45:33.916Z" },
  ];
*/

```

Here is the JSON object we recieve from the server:

[![Array](https://i.stack.imgur.com/LRnBz.png)](https://i.stack.imgur.com/LRnBz.png)  

(source: [xrmb2.net](http://img.xrmb2.net/images/286524.png)) 

Any suggestions on how to access the Objects in Scores Array of the Payload via Typescript command?