error TS2322: Type 'Object' is not assignable to type 'Movie'? Angular 7

Question

I'm sorry to distract with my stupid question. I recently just study Angular 2+ and still do not understand everything. I looked at other answers to this question, but they did not help me. I have a function that returns a list and a separate item of the list.

Code from Service:

constructor(private http: HttpClient) { }
getMovies() {
 return this.http.get(this.baseUrl);
}
getMovie(id: number) {
return this.http.get(this.baseUrl + id);
}

The component that returns lists

 private movies = [];
 constructor(private movieService: MovieService) {}
 ngOnInit() {
  this.getMovies();
 }
private getMovies() {
 this.movieService.getMovies()
  .subscribe((response: any) => {
    this.movies = response.results;
  });
}

And my component which returns a list item:

movie = new Movie();

constructor(
 private movieService: MovieService,
 private activeRoute: ActivatedRoute) {
}

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

getMovie(): void {
 const id = +this.activeRoute.snapshot.paramMap.get('id');
  this.movieService.getMovie(id)
  .subscribe(movie => this.movie = movie);
}

Whatever I do and how I did not rewrite the code, I get the same error.

ERROR in src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? src/app/page/movie-detail/movie-detail.component.ts(34,27): error TS2322: Type 'Object' is not assignable to type 'Movie'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'page' is missing in type 'Object'.

How to correct this error, or at least where you can read about it, see how it is done? I have an API request which returns the following:

{"page": 1,
"results": [
{
  "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg",
  "adult": false,
  "overview": "Framed in the 1940s for the...",
  "release_date": "1994-09-10",
  "genre_ids": [
    18,
    80
  ],
  "id": 278,
  "original_title": "The Shawshank Redemption",
  "original_language": "en",
  "title": "The Shawshank Redemption",
  "backdrop_path": "/xBKGJQsAIeweesB79KC89FpBrVr.jpg",
  "popularity": 5.446135,
  "vote_count": 5250,
  "video": false,
  "vote_average": 8.32
},
{
  "poster_path": "/lIv1QinFqz4dlp5U4lQ6HaiskOZ.jpg",
  "adult": false,
  "overview": "Under the direction o...",
  "release_date": "2014-10-10",
  "genre_ids": [
    18,
    10402
  ],
  "id": 244786,
  "original_title": "Whiplash",
  "original_language": "en",
  "title": "Whiplash",
  "backdrop_path": "/6bbZ6XyvgfjhQwbplnUh1LSj1ky.jpg",
  "popularity": 9.001948,
  "vote_count": 2072,
  "video": false,
  "vote_average": 8.28
}
],
"dates": {
"maximum": "2016-09-01",
"minimum": "2016-07-21"
},
"total_pages": 33,
"total_results": 649
}

I think I have error in service, because I do not get the pages when I display the list and a separate item of the list. But I did not find how to do it differently, or these options are no longer working.

either change `return this.http.get(this.baseUrl + id);` to strongly typed `return this.http.get(this.baseUrl + id);` in `getMovie` method of your movieservice.You need to import `Movie` class to your service for this. Or you can typecast the response object `movie` as `.subscribe(movie => this.movie = movie);` in your `getmovie()` method of component. — Niladri, Nov 19 '18 at 15:36
Typescript is showing this error because you are trying to assign `this.movie` which is of type `Movie` to default `Object` type. — Niladri, Nov 19 '18 at 15:38
The API response you have returned appears to be for the `getMovies` function, not `getMovie`. You will likely want to parse this into a different structure, or at the very least, put `results` directly into a `Movie[]` array. — Ian MacDonald, Nov 19 '18 at 15:50

score 2 · Accepted Answer · answered Nov 19 '18 at 15:41

you can either specify your type in your get function

return this.http.get<Movie>(this.baseUrl);

Or specify it in your function

getMovies(): Observable<Movie> {
 return this.http.get(this.baseUrl);
}

Or do both

 getMovies(): Observable<Movie> {
     return this.http.get<Movie>(this.baseUrl);
}

score 1 · Answer 2 · answered Nov 19 '18 at 15:55

1

Because you're using the HttpClient, You have to provide the necessary casting of the returned results as shown in this answer which shows how to setup both component and service provider to call and receive http JSON results.

answered Nov 19 '18 at 15:55

mohsenmadi

2,277
1
23
34

error TS2322: Type 'Object' is not assignable to type 'Movie'? Angular 7

2 Answers2