Trying to add streaming service providers to the webpage but currently the code just display undefined. What am I doing wrong? Thanks!
Helpers.js
//Populate dropdown menu with all the available genres
const populateGenreDropdown = (genres) => {
const select = document.getElementById('genres');
for(const genre of genres){
let option = document.createElement('option');
option.value = genre.id;
option.text = genre.name;
select.appendChild(option);
}
};
//Returns the current genre selection from the dropdown menu
const getSelectedGenre = () => {
const selectedGenre = document.getElementById('genres').value;
return selectedGenre;
};
//Displays the like and dislike buttons on the page
const showBtns = () => {
const btnDiv = document.getElementById('likeOrDislikeBtns');
btnDiv.removeAttribute('hidden');
};
//Clear the current movie from the screen
const clearCurrentMovie = () => {
const moviePosterDiv = document.getElementById('moviePoster');
const movieTextDiv = document.getElementById('movieText');
const movieProviderDiv = document.getElementById('provider');
moviePosterDiv.innerHTML = '';
movieTextDiv.innerHTML = '';
movieProviderDiv.innerHTML = '';
}
//After liking a movie, clears the current movie from the screen and gets another random movie
const likeMovie = () => {
clearCurrentMovie();
showRandomMovie();
}
//After disliking a movie, clears the current movie from the screen and gets another random movie
const dislikeMovie = () => {
clearCurrentMovie();
showRandomMovie();
}
//Create HTML for movie poster
const createMoviePoster = (posterPath) => {
const moviePosterUrl = `https://image.tmdb.org/t/p/original/${posterPath}`;
const posterImg = document.createElement('img');
posterImg.setAttribute('src', moviePosterUrl);
posterImg.setAttribute('id', 'moviePoster');
return posterImg;
}
//Create HTML for movie title
const createMovieTitle = (title) => {
const titleHeader = document.createElement('h1');
titleHeader.setAttribute('id', 'movieTitle');
titleHeader.innerHTML = title;
return titleHeader;
}
//Create HTML for movie overview
const createMovieOverview = (overview) => {
const overviewParagraph = document.createElement('p');
overviewParagraph.setAttribute('id','movieOverview');
overviewParagraph.innerHTML = overview;
return overviewParagraph;
}
/*const createMovieProvider = (providers) => {
const providerHeader = document.createElement('h2');
providerHeader.setAttribute('id','provider');
providerHeader.innerHTML = providers;
return providerHeader;
}*/
const createMovieProvider = (providers) => {
const providerHeader = document.createElement('h2');
providerHeader.setAttribute('id', 'provider');
providerHeader.textContent = 'Streaming Providers:';
const providerList = document.createElement('ul');
providers.forEach((provider) => {
const providerItem = document.createElement('li');
providerItem.textContent = provider;
providerList.appendChild(providerItem);
});
const providerDiv = document.getElementById('provider'); // Get the existing 'provider' div
providerDiv.innerHTML = ''; // Clear its content
providerDiv.appendChild(providerHeader);
providerDiv.appendChild(providerList);
};
//returns a random movie from the first page of movies
const getRandomMovie = (movies) => {
const randomIndex = Math.floor(Math.random() * movies.length);
const randomMovie = movies[randomIndex];
return randomMovie;
}
//uses the DOM to create HTML to display the movie
const displayMovie = (movieInfo) => {
const moviePosterDiv = document.getElementById('moviePoster');
const movieTextDiv = document.getElementById('movieText');
const likeBtn = document.getElementById('likeBtn');
const dislikeBtn = document.getElementById('dislikeBtn');
const providerDiv = document.getElementById('provider');
//Create HTML content containing movie info
const moviePoster = createMoviePoster(movieInfo.poster_path);
const titleHeader = createMovieTitle(movieInfo.title);
const overviewText = createMovieOverview(movieInfo.overview);
createMovieProvider(movieProviders);
//Append title, poster, and overview to page
moviePosterDiv.appendChild(moviePoster);
movieTextDiv.appendChild(titleHeader);
movieTextDiv.appendChild(overviewText);
movieProviderDiv.appendChild(providerHeading);
showBtns();
likeBtn.onclick = likeMovie;
dislikeBtn.onclick = dislikeMovie;
}
script.js
const api_key = 'not shown for privacy';
const baseURL = 'https://api.themoviedb.org/3';
const playBtn = document.getElementById('playBtn');
//Get movie genres from the API
const getGenres = async () => {
const genreRequestEndpoint = '/genre/movie/list';
const requestParams = `?api_key=${api_key}`;
const urlToFetch = `${baseURL}${genreRequestEndpoint}${requestParams}`;
try{
let response = await fetch(urlToFetch);
if(response.ok){
let jsonResponse = await response.json();
const generes = jsonResponse.genres;
return generes;
}
} catch(error){
console.log(error);
}
};
//Get movies from the selected generes
const getMovies = async () => {
const SelectedGenre = getSelectedGenre();
const discoverMovieEndpoint = '/discover/movie';
const requestParams = `?api_key=${api_key}&with_genres=${SelectedGenre}`;
const urlToFetch = `${baseURL}${discoverMovieEndpoint}${requestParams}`;
try{
let response = await fetch(urlToFetch);
if(response.ok){
const jsonResponse = await response.json();
const movies = jsonResponse.results;
return movies;
}
}
catch(error){
console.log(error);
}
};
//Get selected movie info
const getMovieInfo = async (movie) => {
const movieId = movie.id;
const MovieInfoEndpoint = `/movie/${movieId}`;
const requestParams = `?api_key=${api_key}`;
const urlToFetch = `${baseURL}${MovieInfoEndpoint}${requestParams}`;
try {
let response = await fetch(urlToFetch);
if (response.ok){
const movieInfo = await response.json();
return movieInfo;
}
}
catch(error){
console.log(error);
}
};
/*const getProviderInfo = async (movie) => {
const movieId = movie.id;
const providerEndpoint = `/movie/${movieId}/watch/providers`;
const requestParams = `?api_key=${api_key}`;
const urlToFetch = `${baseURL}${providerEndpoint}${requestParams}`;
try{
let response = await fetch(urlToFetch);
if(response.ok){
const providers = await response.json();
const streamingInfo = data.results['US'].flatrate.provider_name;
return streamingInfo;
}
}
catch(error){
console.log(error);
}
}*/
const getProviderInfo = async (movie) => {
const movieId = movie.id;
const providerEndpoint = `/movie/${movieId}/watch/providers`;
const requestParams = `?api_key=${api_key}`;
const urlToFetch = `${baseURL}${providerEndpoint}${requestParams}`;
try {
let response = await fetch(urlToFetch);
if (response.ok) {
const providersData = await response.json();
const streamingInfo = providersData.results['US']?.flatrate.map(provider => provider.provider_name) || [];
return streamingInfo;
}
} catch (error) {
console.log(error);
return [];
}
}
//Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = async () => {
const movieInfo = document.getElementById('movieInfo');
if (movieInfo.childNodes.length > 0){
clearCurrentMovie();
}
let movies = await getMovies();
let randomMovie = getRandomMovie(movies);
let info = await getMovieInfo(randomMovie);
let movieProvider = await getProviderInfo(randomMovie);
displayMovie(info);
displayMovie(movieProvider);
};
getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;