When attempting to utilize a service for retrieving a JSON object, I encountered an error while using the service method:
ERROR TypeError: this.dataService.getMovie is not a function
Here is my code snippet:
DataService:
@Injectable({
providedIn: 'root'
})
export class DataService {
getMovieURL = 'http://www.omdbapi.com/?apikey=27f198d0&t=';
constructor(private http: HttpClient) { }
getMovie(title: string): Observable<Movie> {
return this.http.get<Movie>(this.getMovieURL + title);
}
}
main.ts
export class MainComponent implements OnInit {
moviesToLoad = ["The Predator","Skyscraper","Avengers: Infinity War","Jurassic World: Fallen Kingdom","Black Panther"];
moviesArray:Array<Movie>=[];
constructor(private dataService:DataService) {
for(let i =0; i<this.moviesToLoad.length; i++){
this.dataService.getMovie(this.moviesToLoad[i]).subscribe(res=> {
this.moviesArray.push(res);
})
}
}
html:
<div *ngFor='let c of moviesArray'>
{{moviesArray.Title}}
</div>
What could be causing this issue?