Reading json data through subscription to service method in Angular

Question

I have gone through other similar topics but nothing worked for me.

Players.service.ts

 constructor(private http: Http) {
    }

     getJSON(): Observable<any> {
        return this.http.get('../../assets/players.json')
            .map((res: any) =>  this.players = res.json() )
            .catch((error: any) => Observable.throw( 'error', error));
    }

Player.component.ts

ngOnInit() {
    this.playersService.getJSON().subscribe((players: any[]) => {
    this.players = players; console.log('players ', this.players);
},
     error => console.log(error)
    );
  }

Player.component.html

<app-player-item *ngFor="let player of players"
</app-player-item>

and players.JSON

{
    "players": [
        {
            "name": "xxxx",
            "surname": "xxxxx",
            "city": "xxxxx",
            "ranking": "12",
            "email": "xxxxxx@xxxxx.com",
            "photo": "assets/images/sk.jpg"
        },
        {
            "name": "Sultan Mehmed",
            "level": "Advanced",
            "victories": "18",
            "goalsScored": "23",
            "gamesPlayed": "29",
            "email": "smehmed@ecovadis.com",
            "photo": "assets/images/sm.jpg"
        },
         {....}
         ]
}

Should work but i get an errors of:

• 'Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as
  Arrays.'
• Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined TypeError: Cannot read property 'unsubscribe' of undefined

Answer 1

The problem is in your service getJson(), this.players = res.json() not res.json

Your other problem is ngFor only works with arrays so either in your JSON file make it an actual array or in your logic define the array properly.

I.E.

getJSON(): Observable<any> {
        return this.http.get('../../assets/players.json')
            .map((res: any) => res.json() )
            .map(json => this.players = json['players'])
            .catch((error: any) => Observable.throw( 'error', error));

essentially the first map transforms your json to json object, the second takes the json and grabs the values under players key from your json file and maps it to your variable this.players