I'm in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage utilizes a GET request through a service to retrieve an array of objects containing the movie data. This movie data is then displayed using ngFor* in its HTML template.
Each movie thumbnail on the homepage has a click event handler that directs users to a separate page where more detailed information about the selected movie, such as description and ratings, will be displayed. To achieve this functionality, I am utilizing a service that makes another GET request, with the selected movie's id being passed as a parameter in the query.
Below is the code snippet for the Homepage component responsible for rendering the initial API movie data:
import { Component } from '@angular/core';
import { MovieDataService } from '../services/movie-data.service';
@Component({
selector: 'home-card',
templateUrl: './home-card.component.html',
styleUrls: ['./home-card.component.css']
})
export class HomeCardComponent {
movieData: any = {};
constructor(private movieDataService: MovieDataService) {}
ngOnInit(): void {
this.movieDataService.getData().subscribe((data) => {
this.movieData = data;
// Display JSON data in the console
console.warn(data);
})
}
}
Here is the HTML code for the homepage:
<div class="wrapper-grid">
<div *ngFor="let result of movieData.results;" class="container">
<img routerLink="/movieInfo" src='https://image.tmdb.org/t/p/w780{{result.poster_path}}' alt='thumbnail' class="thumbnail-img">
<info-page [movieId]="result.id"></info-page>
<p class="home-text">{{result.title}}</p>
<p class="home-date">{{result.release_date}}</p>
</div>
</div>
The Single movie page is responsible for rendering the selected movie's data:
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { single } from 'rxjs';
import { DataService } from '../services/data.service';
@Component({
selector: 'info-page',
templateUrl: './info-page.component.html',
styleUrls: ['./info-page.component.css']
})
export class InfoPageComponent {
@Input()
movieId: number;
singleMovieData: any = {} ;
constructor(private DataService: DataService) {}
getMovie() {
this.DataService.getMovie(this.movieId).subscribe((data: any) => {
this.singleMovieData = data;
})
}
ngOnInit(): void {
this.getMovie()
}
}
Service for the Single Movie page:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
movieId: number;
public getMovie(movieId: number) {
return this.http.get(`https://api.themoviedb.org/3/movie/${movieId}? api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US`);
}
}
At present, each function appears to be functioning properly - the correct information is retrieved when logging the movieId and singleMovieData. However, I am encountering a 404 error when executing the GET request in the service on the Single Movie Page, with the message indicating that the parameter for movieId is undefined. If anyone can assist me in identifying what may be causing this issue, I would greatly appreciate it.