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 .
mtrtmk
March 24, 2023, 10:57am
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 .
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);
}
};
mtrtmk
March 24, 2023, 2:39pm
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}`;
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