How to catch a property of a JSON object from an Angular HTTP call and fix the “No property” error in Angular CLI?

Question

I am using a public API to fetch movie data. And the following is my service method for getting that data from API:

getMovieList(): Observable<Movie[]> {
  return this.http.get(this.moviesURL).pipe(
   map((data: Movie[]) => data),
   catchError(this.handleError),
);

}

And this is the method in the component for subscribing that data:

getMovieList(): void {
  this.movieApiService.getMovieList()
   .subscribe(
     (data: Movie[]) => {
       this.movieList = data.results;
     }
  );
}

The problem is that the API returns an object which has 4 properties: page , results , total_pages , total_results . And I only need the results property. But when I try to assign data.results to my component's property or send data.results from my service method instead of data then angular cli gives an error of "results is an undefined property of data" . My question is how do I get the results property directly without having to touch the data object and i also need to assign Movie[] type to the results . But currently I am setting the type to the data object.

Answer 1

The problem lies in your model, you defined that you expect array of Movies but you receive the object with 4 properties which one of them called results are the model you defined, so the solution is:

Define the interface like this:

  export interface IDataFromApi {
    results: Movie[];
    page: number;
    total_pages: number;
    total_results: number;
}

Then the first function will be:

  getMovieList(): Observable<IDataFromApi> {
    return this.http.get(this.moviesURL).pipe(
     map((data: IDataFromApi) => data),
     catchError(this.handleError),
  );

And method in component:

 getMovieList(): void {
  this.movieApiService.getMovieList()
   .subscribe(
     (data: IDataFromApi) => {
       this.movieList = data.results;
     }
  );
}