JS Film Finder Project - 'Invalid API Key'

Language Help JavaScript
1

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.

2

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
3

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

4

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 .

5

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.

7

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);
}
};

8

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}`;
9

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;
10

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
11

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

1 Like