如何从 json 响应 angular 访问数据

Question

*Project Description

I am trying to access data from a json server using observables, the api returns the response in the following format.

{
    "status": "success",
    "data": {
        "players": [
            {
                "id": "1",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            },
                        {
                "id": "2",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            },
                        {
                "id": "3",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            }
        ]
    }
}

what I tried

• created a class named player.
• created a service which send a get request to the server when called.

  getPlayers(): Observable<Player[]> {
    return this.http.get<Player[]>(baseURL + 'allplayers').pipe(catchError(this.processHTTPMsgService.handleError));
    
  }

• then in the.ts file of the page calling the service and subscribing to it.

players: Player[];
this.playrService.getPlayers().subscribe(players => (this.players = players), errmess => this.errMess = <any>errmess);

Ps: this.players is a variable of type Player "a class that I created like this.

export class Player {
    id:number;
    national_id:number;
    name:string;
    club:string;
    gov:string;
    age_level:string;
    weight:number;
    gender:string;
};

Problem

This method puts the full response in the "players" variable "the status and the data", I know I am missing something but whatever I tries keeps leading me to the same place.

Expected Result

I expect the players "this.players" to contain only the data from the json response, to be able to access values like "id, name, etc.." in the html.

Used Libraries and versions

• Angular V:5.1
• Flex-Layout "angular" V: 2.00 beta 12
• Angular Material V: 5.01

Answer 1

Assign the property players from the response as below.

this.playrService.getPlayers().subscribe(response => (this.players = response.data.players), errmess => this.errMess = <any>errmess);

Loop the data in html as below.

<table>
    <thead>
        <th>Id</th>
        <th>National Id</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let player of players">
            <td>{{player.id}}</td>
            <td>{{player.national_id}}</td>
            <td>{{player.name}}</td>
        </tr>
    </tbody>
</table>

Answer 2

I think that you need to define the correct type like this:

 interface DataResponse { status: string; data: {players: Player[]}; }

Than to fix the get method like this:

 getPlayers(): Observable<Player[]> { return this.http.get<DataResponse>(baseURL + 'allplayers').pipe( map(res => res.data.players), catchError(this.processHTTPMsgService.handleError) ); }