JS Film Finder Project - 'Invalid API Key'

Hi Guys,

I’m currently working on the film finder project.

I’m at the point where I’m fetching the data from the TMDB but I’m getting a weird error saying that my API key is not valid.

Here is a portion of my code.

const getGenres = async () => {
  const genreRequestEndpoint = "/genre/movie/list";
  const requestParams = `?key=${tmdbKey}`;
  const urlToFetch = tmdbBaseUrl + genreRequestEndpoint + requestParams;
  console.log(urlToFetch)

  try {
    const response = await fetch(urlToFetch)
    if (response.ok) {
      const jsonResponse = await response.json();
      const genres = jsonResponse.genres;
      return genres;
    }
    throw new Error("Error with Request!");
  } catch (e) {
    console.log(e);
  }
};

and here is the error I’m getting when I use the URL that’s generated by my app.

{
status_code: 7,
status_message: "Invalid API key: You must be granted a valid key.",
success: false
}

I have checked, double-checked copy + pasted and it’s still not valid. Does anyone else have this issue or have any idea what I’ve done wrong?

Any guidance would be greatly appreciated.

I figured it out, turns out the key is valid, but the Base URL I was using was incorrect. It’s not exactly clear, but the Base URL is: https://api.themoviedb.org/3/

1 Like

I think
const requestParams = ?key=${tmdbKey};
should be ?**api_key**=${tmdbKey};

I’m having the same problem. It tells me invalid api Key but I already check if it’s the same from the movie api website, I re-copy and paste the key, I also check the base url and it’s the same of yours but it keeps giving the invalid key problem .

Can you copy-paste your code (or link to github)? It may reveal clues as to why your code is not working.

To preserve code formatting in forum posts, see: [How to] Format code in posts

Make sure you edit out your api key.

const tmdbKey = ‘api-key’;
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);
}
};

Consider making the following changes:

// You wrote:
const requestParams = `?api_key= ${tmdbKey}`;
// Change it to:
const requestParams = `?api_key=${tmdbKey}`;

// You wrote:
const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}}`;
// Change it to:
const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;

Hello

I have tried all the suggestions I am still getting invalid API key, I also regenerated a new key same issue

My Code is below.

const tmdbKey = `API KEY`;
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();
      console.log(jsonResponse);
    }
  } catch (error) {
    console.log(error);
  }
};

const getMovies = () => {
  const selectedGenre = getSelectedGenre();
};

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;

Check the capitalization on the line:

const requestParams = `?api_Key=${tmdbKey}`;

That might need to be a lower case K in ?api_key to work.

3 Likes

Thanks that worked, can’t believe I didn’t see that error.

1 Like

Sorry James, but I have the same error message and tried all previous suggestions, and it is saying this


And this is my code so far

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 = () => {
const selectedGenre = getSelectedGenre();

};

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;

The error is that you’re using commas in your urlToFetch variable

const urlToFetch = `${tmdbBaseUrl}, ${genreRequestEndpoint}, ${requestParams}`;

It should instead read:

const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}` ;

This is essentially giving you a bad url. Remove the commas and it should work.

4 Likes

Man you are the best, that was the whole mistake hahaha. Thank you so much

1 Like