Film Finder Project

Language Help React.js
1

Hi everyone,

I am really stuck on this Film Finder project.
I have followed everything on Get Unstuck and on the MovieDB website itself…
The basic link below just pops up with a blank page.
I tried is with the “/” after the 3, but then it says API key invalid. I tried the Example API request and my key works perfectly.
I have tried to search the internet for an answer and I still cannot find anything.

Any help would be seriously appreciated.
Thank you so much:

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

const getGenres = async() => {
const genreRequestEndpoint = ‘/genre/movie/list’;
const requestParams = ?api_key=${tmdbKey};
const urlToFetch = ${tmdbBaseUrl}${genreRequestEndpoint}${requestParams};

try {
const response = await fetch(urlToFetch);
if(response.ok){
const jsonResponse = await response.json();
const genres = jsonResponse.genres;
return genres;
}

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

2

Please post a link to the lesson.
And please format your code so we can see all of the characters of the request url.

2 Likes
5

Replacing the code did not work unfortunately.

The error I get on the console is:
I am not really sure if that would affect it and if yes, how exactly to update it to make it work

Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

  • Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
  • Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.

Affected resources:

  1. 11 cookies

  2. |Name|Domain & Path|
    | — | — |
    |iterableEndUserId|.codecademy.com/|
    |_tt_enable_cookie|.codecademy.com/|
    |_ttp|.codecademy.com/|
    |_cc_exp_id|.codecademy.com/|
    |_gcl_au|.codecademy.com/|
    |_ga|.codecademy.com/|
    |_gid|.codecademy.com/|
    |_ga_3LRZM6TM9L|.codecademy.com/|
    |cc_jwt|.codecademy.com/|
    |_uetsid|.codecademy.com/|
    |_uetvid|.codecademy.com/|

6

If you improve the indentation of the getMovieInfo function, you see this:

const getMovieInfo = async(movie) => {
  const movieId = movie.id;
  const movieEndpoint = `/movie/${movieId}`;
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;

  try { // <-- close this block
     const response = await fetch(urlToFetch);
      if(response.ok) { 
        const jsonResponse = await response.json();
        const movieInfo= jsonResponse;
        return movieInfo;
      } 
      catch(error){ // <-- move out of this scope
        console.log(error);
      }
};

The catch block is within the try block. And you do not close the try block.
an else statement belongs where your catch clause is now. And you need to move the catch block one level up – after the closing curly brace of the try block, that you need to add.

2 Likes
7

HI Mirja,

I amended the coding as requested, I must’ve accidentally overlooked that.
Now the dropdown menu works, however if I choose a genre and click on the “Let’s play!” button, nothing happens.
Now when looking at the console, there aren’t any more errors.

Do you have any ideas what I else I might’ve missed, causing the button not to work?

Truly thank you for the help!

1 Like
8

In the showRandomMovie function, you call getRandomMovies.

But there is no such function defined in your code. That means there must be an error in the console. Are you looking at the google devtools?

Edit
Just saw that there’s a file helpers.js with predefined functions that apparently do not need to be imported into script.js. But it does not contain a function getRandomMovies (check your spelling).

Don’t forget to remove your API key from your edited code.

2 Likes
9

You were right, it was supposed to be >getRandomMovie , so not Movies.
However, I keep getting this error:

Failed to load resource: net::ERR_CONNECTION_REFUSED
2script.js:43 Uncaught (in promise) ReferenceError: discoverMovieEndpoint is not defined
at getMovieInfo (script.js:43:39)
at HTMLButtonElement.showRandomMovie (script.js:65:20)

The button still does not work and won’t actually do anything besides the dropdown menu.
I have followed the getUnstuck video several times and I am about to give up.
Technically I have finished the project based on CodeAcademy… but it won’t work

10

Link to the project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-async-javascript-and-http-requests/modules/wdcp-22-learn-javascript-syntax-requests/projects/js-film-finder 1

Somehow magically the dropdown menu itself started working yesterday, I did not change anything on it.
But now, when I logged in to finish the project, the dropdown menu does not work anymore and the moviedb website still comes up blank

EDIT: the dropown menu now works, but it still keeps coming up with errors on console and “Let’s Play” button won’t work.
Full code:

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

const getGenres = async() => {
  const genreRequestEndpoint = '/genre/movie/list';
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;

try {
  const response = await fetch(urlToFetch);
  if(response.ok){
    const jsonResponse = await response.json();
    const genres = jsonResponse.genres;
    return genres;
  }
} catch(error) {
  console.log(error);
};
};

const getMovies = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = '/discover/movie';
  const requestParams = `?api_key=${tmdbKey}&with_genre=${selectedGenre}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
  try { 
    const response = await fetch(urlToFetch);
    if(response.ok) {
      const jsonResponse = await response.json();
      const movies = jsonResponse.results;
      return movies;
    }
  } catch(error) {
    console.log(error);
  };
};

const getMovieInfo = async(movie) => {
  const movieId = movie.id;
  const movieEndpoint = `/movie/${movieId}`;
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;

try {
   const response = await fetch(urlToFetch);
    if(response.ok) { 
      const jsonResponse = await response.json();
      const movieInfo= jsonResponse;
      return movieInfo;

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

// 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();
  };
const movies = await getMovies();
const randomMovie = getRandomMovie(movies);
const info = await getMovieInfo(randomMovie);
displayMovie(info);
};

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

Check Chrome devtools, the console will tell you this:

Uncaught (in promise) ReferenceError: discoverMovieEndpoint is not defined
at getMovieInfo

Now check where you use this variable: You use it in two different scopes – but you defined it in just one.