how to receive the data from an API to a component model in angular

Question

I get the data from an API with the service game in game.component.ts I get the data I can show in cards the array of objects games but i am geting this error: core.js:6241 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngDoCheck (common.js:4406)

also the model Game{name:"",image:"",releaseOn:Array(0)......} it is empty the model is not being used.

 export class GamesService {
      public url;
      public game: Game[];
      constructor(
        private http: HttpClient
      ) { }
  
      getListGames():Observable<any>
      {
       return this.http.get(`https://api.rawg.io/api/games?&dates=2010-01-01,2020-12-31&page_size=20`);
      }

to the component games.component.ts

export class GamesComponent implements OnInit {
  public games: Game;
  //public game: Game;
  public genres;
  public platforms;
  public pcIcon: string = '../assets/pc.png';
  public PC;
  public Xbox: string = '../assets/xbox.png';
  public plat: string;
  public name: string;
  public title = 'Games component';
  //public carouselExampleControls: String;
  //public index: number;

  public rating;
  public page: number = 1;
  public totalPages;
  public next;
  public prev;
  public number_pages;
  public count;
  public nextpage;

  constructor(
    private gamesService:GamesService,
    private router: Router,
  ) 
  {
    this.games = new Game('', '', [],  '', [], 1 );
    console.log(this.games);
  }
 
  ngOnInit(): void {
    this.gamesService.getListGames().subscribe( (data: any) =>{
   
      this.games = data.results;
 
      console.log(data.results[0].platforms[0]);
      data.results.forEach((game) => {
   
        game.platforms.forEach((platform)=> { 
                //your code here
                console.log(platform);
            });
    });

  });
  }

How to get the object game from the api using the model game.ts game.ts

export class Game{
      id: any;
      constructor(
        public name: string,
        public image: string,
        public releaseOn: Array<ReleaseOn>,// do it an array of releaseOn platform
        public releaseDate: string,
        public genre: Array<Genres>,// do it an array of genres
        public rating: number,
      ){}
    }
    
    export class Genres {
      genre: string
    }
    
    export class ReleaseOn {
      releaseOn: string
    }

How to get the data from API with game.ts model in game.component this.games = new Game('', '', [], '', [], 1 );

game-card.component.ts

<div class="card">
    <h5 class="card-title">
        {{ games.name}}
    </h5>
    <img class="card-img-top" [src]="games.background_image" alt="Card image cap">
    <div class="card-body">
        <!-- <p class="card-text"><span class="black">Release on</span> {{ game.platform.name}}</p> -->
        <p class="card-text"><span class="black">Release on</span> <span class="platform" *ngFor="let platforms of games.platforms"><img class="img-icon" *ngFor="let platforms of games.platforms.name"> {{ platforms.platform.name }}</span></p>

        <p class="card-text"><span class="black">Release date</span> {{ games.released }}</p>
        <p class="card-text"><span class="black">Genere </span><span class="platform" *ngFor="let genres of games.genres">{{ genres.name}}</span></p>
        <p class="card-text"><span class="black">Rating  <star-rating [value]="games.rating" totalstars="5" checkedcolor="yellow" uncheckedcolor="black" size="24px" readonly="false"></star-rating></span></p>

        <p class="card-text">
            <span class="badge badge-primary">  
                        {{ games.user_game }}
                    </span>
        </p>
        <div>

object game from api

Answer 1

As data model and view model are different, You need to map each property.

Try this. I have not tested it but it should work.

this.gamesService.getListGames().subscribe( (data: any) =>{
      this.games = data.results.map(item=>{
          const gameItem: Game = {
            id: item.id,
            name: item.name,
            image: item.background_image,
            releaseDate: item.released,
            rating: item.rating,
            genre: item.genres ? item.genres.map(g => ({ genre: g.name })) : [],
            releaseOn: item.platform
              ? item.platform.map(p => ({ releaseOn: p.name }))
              : []
          };
          return gameItem;
      });
    });