Film Finder - getMovieInfo fails on fetch(urlToFetch)

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

My project if failing in getMovieInfo. All other functions are working as expected.
As a result, getMovieInfo returns undefined to showRandomMovie.
see below const response = await fetch(urlToFetch); //IT FAILS HERE

const getMovieInfo = async (movie) => {
  const movieId = movie.id;
  console.log(`In getMovieInfo: movieId = ${movieId}`);

  const movieEndpoint = `/movie/{${movieId}}`;
  let requestParams = `?api_key=${tmdbKey}`;
  let urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`;

  console.log(`In getMovieInfo: url = ${urlToFetch}`);
  //api.themoviedb.org/3/movie/508947/?api_key=xxxx  
  //(the movie.id is valid and provided by showRandomMovie)

  try {
    const response = await fetch(urlToFetch); //IT FAILS HERE
    //the URL appears to be incorrect.  See image above.

    console.log(`In getMovieInfo: jsonResponse = ${jsonResponse}`);
    console.log(`In getMovieInfo: response.ok = ${response.ok}`);
    //false, but catch statement does not run ??
    
    
    if (response.ok) {
      const jsonResponse = await response.json();
      const movieInfo = jsonResponse;
      return movieInfo;
    }
  } catch (errors) {  //catch statement does not run
    console.log(`In getMovieInfo: catch(errors) = ${errors}`);
  }
};

I had something different for movieEndpoint
let movieEndpoint = "/movie/" + movieId;

I think you have extra { } in that string.

Thanks for the reply. The extra enclosing brackets do not make a difference. I get the same result either way. TMDB api for Get Detail is /movie/{movie_id}.

Here are the results without the brackets:
In showRandomMovie-getRandomMovie: id = 760868 title = Svart krabba
script.js:45 In getMovieInfo: movieId = 760868

script.js:51 In getMovieInfo: url = https://api.themoviedb.org/3/movie/760868?api_key=xxxx
script.js:67 In getMovieInfo: catch(error) = ReferenceError: jsonResponse is not defined

Because getMovieInfo does not return anything because of the error at line 51. jsonResponse never gets set, movieInfo does not get set, the info variable in showRandomMovie is undefined which also explains error in displayMovie. I cannot explain why the catch block is failing.

script.js:85 In showRandomMovie: info = undefined
helpers.js:89 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘poster_path’)
at displayMovie (helpers.js:89:53)
at HTMLButtonElement.showRandomMovie (script.js:87:3)

That’s a different error;
it says jsonResponse is not defined,
so take out the line that says
console.log(`In getMovieInfo: jsonResponse = ${jsonResponse}`);

Yes, you are right. That line was originally inside the if block after jsonResponse was initialized. I moved it up to get it temporarily out of the way and then forgot about it (sigh). Once that was fixed, it revealed the extra brackets in the movieEndpoint was also wrong. Thanks.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.