How to *ngFor through JSON (interface array)? Error TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'

Question

I know similar questions were asked several times before, but couldn't find my answer there. I would like to iterate through an 'interface' array as you can see in the HTML part.

Angular component:

export class PlayerComponent {

  constructor(private playerApiService: PlayerApiService) {}

  ngOnInit(): void {
    this.getPlayers();
  }

  objectKeys = Object.keys;  

  players: IPlayer[] = [];
  
  getPlayers(): void {
    this.playerApiService.getPlayers().subscribe(players => {
      this.players = players;
    });
  }
}

Angular HTML:

<div *ngFor="let key of objectKeys(players)">
    Key: {{key}}

    <div *ngFor="let player of players[key]">
        {{player.name}}
        {{player.isAttending}}
    </div>
</div>

JSON:

{
  "player": [
    {
      "id": 1,
      "name": "Andrew",
      "isAttending": false
    },
    {
      "id": 2,
      "name": "Blair",
      "isAttending": true
    },
    {
      "id": 3,
      "name": "Carl",
      "isAttending": true
    },
    {
      "id": 4,
      "name": "Diane",
      "isAttending": false
    }
  ]
}

Angular interface:

export interface IPlayer {
    id: number,
    name: string,
    isAttending: boolean
}

It works without the interface, but how it is done by using the interface?

//players: IPlayer[] = [];
players: { [key: string]: any } = [];

Answer 1

The type of your JSON is

interface Players{
   player: IPlayer[]
}

// or type Players = Record<string,IPlayer[]>

So you should have:

players: Players = {player:[]};

To sumup:

export class PlayerComponent {

  constructor(private playerApiService: PlayerApiService) {}

  ngOnInit(): void {
    this.getPlayers();
  }

  objectKeys = Object.keys;  

  players: { [key: string]: IPlayer[] } = {}
  
  getPlayers(): void {
    this.playerApiService
         .getPlayers()
         .subscribe((players:{ [key: string]: IPlayer[] }) => {
            this.players = players;
         });
  }
}


// Warning, this.playerApiService.getPlayers() should return the type { [key: string]: IPlayer[] }

Answer 2

It doesn't work because you have not mentioned the type on the parameter when subscribing to the observable, you can try to do like this :

  getPlayers(): void {
      this.playerApiService.getPlayers().subscribe((players:IPlayer) => {
      this.players = players;
    });
  }

This should work properly but make sure that you have imported the interface in your component. This error occurred because typescript is strict about respecting types.

I hope this helps, let me know if any further questions