How to get data from array object in angular typescript?

Question

I am calling a rest api which returns the data in json array of object format like this

Now when I call this rest api from my typecsript code and print on console data received i get this

gameRecord: Fifa = new Fifa(); // this is defined globally in ts class

this.fifaService.fetchGameRecord(gameId).subscribe(
          data => {
            this.gameRecord = data;
            console.log(this.gameRecord);
          }
        );

Now I want to get the wonBy, kashScore attributes value from this object.

But I get undefined error on console, I don't know why

gameRecord: Fifa = new Fifa();


this.fifaService.fetchGameRecord(gameId).subscribe(
      data => {
        this.gameRecord = data;
        console.log(this.gameRecord.kashScore);
      }
    );

Here Code Definations,

export class Fifa {

    gameId: number;
    kashScore: number;
    samScore: number;
    wonBy: string;
    createUserId: number;
    lastModifiedUserId: number;
    creationDate: Date;
    lastModifiedDateTime: Date;
    sessionId: number;
}

And my service file code

fetchGameRecord(gameId: number): Observable<Fifa>{
    const fifaUrl = `${this.baseUrl}/getGameDetail/${gameId}`;
    return this.httpClient.get<Fifa>(fifaUrl);
  }

Answer 1

gameRecord: Fifa = new Fifa();

this.fifaService.fetchGameRecord(gameId).subscribe(
      data => {
        this.gameRecord = data[0]; // <= data is an array
        console.log(this.gameRecord.kashScore);
      }
    );