Film finder

film finder link

hello everyone, I did the whole quiz and was stuck at the bonus challenge. I tried to add the cast of the movie but it returns undefined.

can anyone help with the code :smiling_face:

here is my code in helper.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');
    moviePosterDiv.innerHTML = '';
    movieTextDiv.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;
};

//create cast of movie

const createCast = (cast) => {
    const casting = document.createElement('p');
    casting.setAttribute('id', 'cast');
    casting.innerHTML = cast;
    return casting;
};


// 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 casting = document.getElementById('cast');
    const likeBtn = document.getElementById('likeBtn');
    const dislikeBtn = document.getElementById('dislikeBtn');
  
    // Create HTML content containing movie info
    const moviePoster = createMoviePoster(movieInfo.poster_path);
    const titleHeader = createMovieTitle(movieInfo.title);
    const overviewText = createMovieOverview(movieInfo.overview);
    const cast = createCast(movieInfo.cast);
  
    // Append title, poster, and overview to page
    moviePosterDiv.appendChild(moviePoster);
    movieTextDiv.appendChild(titleHeader);
    movieTextDiv.appendChild(overviewText);
    movieTextDiv.appendChild(cast);
  
    showBtns();
    likeBtn.onclick = likeMovie;
    dislikeBtn.onclick = dislikeMovie;
};
1 Like

Where are you seeing “undefined” message? on the webapp itself?

yes, in the place where the cast should be shown.

1 Like

I’m looking on The Movie Database API menus and the only differences I can see between the object property of “overview” and the object properties of “cast” is what data type they are and also the endpoints their urlToFetch would use…

GET Details → /movie/{movie_id}
details {

overview: //data type is string or null
}

GET Credits → '/movie/{movie_id}/credits`

credits {
cast: //data type is `array[object]’
}

Let me know if this is of any help, I’m trying to figure this out and its driving me bonkers!

Yes, it’s an array (that’s important), so you’d have to do something with the array or change it to a string to make it appear the way you want it to.

that could be changed to

casting.innerHTML = cast.join(", ");

if cast is an array
so that the .innerHTML is set to be a string.

1 Like

Thank you Thank you Thank you!!! I know that debugging is one of the hidden joys of life, but sometimes we just need a lil help from our friends :star_struck:

I will apply this new knowledge and update this thread after more progress. Once again, many thanks!!
:100: :100: :100:

this is the link in github for the whole project, because unfortunately i didn’t understand what u mean

may be when u have the whole code it’ll be easier

@cuervodoesit
@janbazant1107978602

thank you both in advance :smiley:

@mtf can you please help :innocent:

Unfortunately I have not done that project, or worked much with APIs in the past decade so don’t know that I could help. What are you having issues with?

If you used the same folders as the project, then you are missing the the /public
in the path in the src or href attributes in index.html
Also, helperCast was missing .js
(or maybe it should be helpers.js, if you used the same filename as what’s in the project).

On GitHub, you had:

    <link rel="stylesheet" href="./style.css" />
    <script
      defer
      src="https://kit.fontawesome.com/e918d10e90.js"
      crossorigin="anonymous"
    ></script>
    <script defer src="./helperCast"></script>
    <script defer src="script.js"></script>

but, if you use the same folders and filenames as the original project, it should be:

    <link rel="stylesheet" href="./public/style.css" />
    <script
      defer
      src="https://kit.fontawesome.com/e918d10e90.js"
      crossorigin="anonymous"
    ></script>
    <script defer src="./public/helpers.js"></script>
    <script defer src="./public/script.js"></script> 

Check what’s contained in the movieInfo object.
You’ll notice that there is no cast property. (I did console.log and checked the browser’s console.)

So, to get the cast, you’d have to look through the API’s documentation …

spoiler (with code)

putting this together, in the getMovie function, to get the credits object for the movie along with the other stuff, could modify the code to be:

const requestParams = `?api_key=${tmdbKey}&append_to_response=credits`;

If you look at the movieInfo object after doing that, you’ll see that there is no .cast, but there is a .credits now,
and the object in .credits has a .cast
which is an array of objects
and in each object, the name property for each of those objects is a string containing the name for that cast member.

So, in your displayMovie function,
instead of

    const cast = createCast(movieInfo.cast); 

you could put:

    const castArray = movieInfo.credits.cast.map(person => person.name);
    const cast = createCast(castArray);


Don’t only rely on others to do your research for the extra challenges at the end of the project … try to find the stuff yourself first, if you can.

Hello,
this is my improved version of the project, https://find-films.herokuapp.com

“Don’t only rely on others to do your research for the extra challenges at the end of the project … try to find the stuff yourself first, if you can.”

Well Said