Film finder javascript project

Language Help JavaScript
,
1

Hi I am going through the film finder project but non of my console logs seem to be working, would anyone have any idea why?

const tmdbKey = "";
const tmdbBaseUrl = "https://api.themoviedb.org/3";
const playBtn = document.getElementById("playBtn");

const getGenres = async () => {
  const genreRequestEndpoint = /genre/eimov / list;
  const requestParams = `?api_key=${tmbdKey}`;
  const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json()
      console.log(jsonResponse);
      const genres = jsonResponse.genres;
      return genres;
    }
  } catch (error) {
    console.log(error);
  }
};

const getMovies = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = /movie/{movie_id};
   const requestParams = ?api_key=tmdbKey&with_genres=selectedGenre;
   const urlToFetch() = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
   try{
     const response = await fetch(urlToFetch);
     if(response.ok){
       const jsonResponse = await response.json();
       console.log(jsonResponse)
     }

   }catch(error){
     console.log(error)
   }

};
console.log(getMovies()
)
const getMovieInfo = () => {};

// Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = () => {
  const movieInfo = document.getElementById("movieInfo");
  if (movieInfo.childNodes.length > 0) {
    clearCurrentMovie();
  }
};

getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;
2

Hi and welcome to the forums!

Chances are that you’re getting errors and thus the console.log statements are never being reached. You’ll need to check your console to see if any errors are being flagged on page refresh. A couple I see off the top of my head;

  1. genreRequestEndpoint isn’t a string (i.e. not wrapped in backticks or quotes) and seems to have some rogue spaces and a mistyped word.
  2. discoverMovieEndpoint also isn’t a string, and the interpolation key for {movie_id} hasn’t been done correctly (there should be a $ sign.
  3. urlToFetch seems to have brackets after it when it seems like it shouldn’t.

Unfortunately as I don’t have access to your full codebase there’s only so much I can test, but the best thing to do is look in your browser devtools console for errors that crop up. They’ll tell you the script, the line number and the exact error and you should be able to debug from there and find all the issues. If parts of your script aren’t being run it usually means an error is stopping it before it gets the chance to, so always check that first.

2 Likes
3

is there an actual solution file to the project, i rectified some of the issued already and i am getting a list of genres in my drop down which i wasnt before, but beyond that the program is not doing what its suppose to. I have seen the solution video and compared it to my code and it looks the same? seems like from other people who did this project are having issues too looking at the comments to the video. I have gone back to some more basic theory/projects as i found this difficult and not following all whats going on in the code.

4

Unfortunately I’m not sure, I haven’t done this specific project I’ve just spent a long time with Javascript so know it relatively well! Since this project is presumably an HTML/CSS/JS project would you be able to put it into a Codepen or some other sort of online free hosting thing? That way I can deep dive into your code and help debug (of course don’t pull over your tmdb API key, I can fill in mine to test it).

2 Likes
5
6

That’s brilliant thank you!

So it looks like you’re basically there, just one mistake was stopping it from working! In your getMovieInfo function, you have the requestParams variable that stores the API string. However it’s missing 2 things, firstly tmdbKey should be written as a variable ${tmdbKey} to ensure the key is taken and not taken as a literal string. Then secondly you just missed the ? that needs to go at the beginning of that section. This gives the new value of requestParams to be ?api_key=${tmdbKey}. Doing this and adding my own API key in meant the website started working as expected.

1 Like
7

can you explain how you got the list of genres to display in the dropdown menu? I have checked my code with the code provided on the git link here and can’t see any discrepancies however my list still won’t display.