0

I am trying to explore a little more of TMDB API and got confused with the way I should access the data coming from one object which is inside another. The URL I linked contains the API I am calling. It has a bunch of objects for each language type containing the watch providers for a certain movie. I am properly calling this API by passing the movie ID I wish to get the said data from, but it either returns undefined or a message error on console claiming the ngFor can not loop inside an object.

My service:

  listProviders(movieId: number){
    return this.coreApi.get(`${endpoints.listMovies}/${movieId}/watch/providers`)
  }

The component.ts:

 watchProviders: any | undefined

  ngOnInit():void {
    setTimeout(() => {
      this.route.params.subscribe(params =>{
        this.listProviders(params["id"])
      })
    }, 1000);
  }

  listProviders(movieId: number){
    this.moviesService.listProviders(movieId).subscribe((res) => this.watchProviders = res['results'])
  }

How I am passing the data on the HTML:

<span *ngFor="let caProvider of watchProviders.CA">{{ caProvider.link }}</span>

(Scenario with the said console error)

enter image description here

I would appreciate any help and tips to achieve the solution. Thanks in advance!

KimiH
  • 39
  • 6

1 Answers1

0

It sounds like watchProviders.CA is an object rather than an array. You'll either want to drill down further to an actual array, or if you're looking to list the properties of .CA, you can use Object.keys(watchProviders.CA) to get a list of properties. See this answer for more.

Glendon Klassen
  • 11
  • 3