Film Finder, Network error, my (Chinese) internet?

I’m working on the Film finder project in javascript learn http requests 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

I’m on step 11

Here is my code except for the API-key. Everything I’ve written except for some console.logs, the API-key and the tmdbBaseUrl is in getGenres()

console.log('first');
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;
  const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;
  console.log(urlToFetch);
  console.log('before fetch');
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      console.log('inside if')
      console.log(jsonResponse);
    }
  } catch(err) {
    console.log('inside err');
    console.log(err);
  } 
};

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;
console.log('last');

The output I get in the console is:

first script.js:1:9
https://api.themoviedb.org/3/genre/movie/list?api_key=xxxx script.js:11:11
before fetch script.js:12:11
last script.js:48:9
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.themoviedb.org/3/genre/movie/list?api_key=xxxx. (Reason: CORS request did not succeed). Status code: (null).

inside err script.js:23:13
TypeError: NetworkError when attempting to fetch resource. script.js:24:13
Uncaught (in promise) TypeError: genres is undefined
    populateGenreDropdown https://f806d8d35b814826bb2aad761435f6ed.cc-propeller.cloud/public/helpers.js:5
    promise callback* https://f806d8d35b814826bb2aad761435f6ed.cc-propeller.cloud/public/script.js:46

As you can see i get a “NetworkError when attempting to fetch resource” (it takes quite a while before it shows up).
I’m in China and my VPN is not working right now which could be the problem but I can access the movie database website which means it shouldn’t be.

I would very much appreciate if someone could try running the code (with your own API-key) and see if they get the same output in the console. If you do, that would let me know if its my code or my internet that’s the problem.

Thanks

Don’t know why, don’t know how but I just tried again and it suddenly works. I still get the “genres is not defined” error but it looks like that will be solved in the next step.

I haven’t changed anything so I guess the problem was somehow to do with the connection, weird thing is VPN still isn’t working

Wow, this one really is a headache, it’s really annoying not to be able to know if the problem is my code or my internet connection or something else.

I’ve added the code for getMovies() and test:

const getMovies = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = '/discover/movie';
  const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
  const urlToFetch = tmdbBaseUrl + discoverMovieEndpoint + requestParams;

  try {
    const response = fetch(urlToFetch);
    if(response.ok){
      const jsonResponse = await response.json();
      console.log('inside getMovies() if');
      console.log(jsonResponse);
      return jsonResponse
    }
  } catch(err) {
    console.log('error inside getMovies()');
    console.log(err);
  }
};
getMovies();
console.log('getMovies(): ' + getMovies());

And now getGenres() still works but getMovies() throws NetworkError:

first script.js:1:9
getMovies(): [object Promise] script.js:53:9
last script.js:71:9
inside getGenres() if script.js:15:15
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.themoviedb.org/3/discover/movie?api_key=ba88957ad7829dea7fe80439be1fefde&with_genres=. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.themoviedb.org/3/discover/movie?api_key=ba88957ad7829dea7fe80439be1fefde&with_genres=. (Reason: CORS request did not succeed). Status code: (null).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

I’ll try leaving it to let it to unload and then load it again since that somehow worked earlier but this is a really annoying way to do it so I’d still appreciate suggestions for things I might be doing wrong. Would also appreciate if someone else ran the code to se if they get the same problem

It doesn’t run the “console.log(‘error inside getMovies()’);” it seems, I have a console.log with a string in both the try and the catch and neither shows up in the console, does this mean that getMovie() doesn’t run at all? but then where does the NetworkError come from? the console.log from the if(respense.ok) in getGenres() prints so getGenres() still runs like it’s supposed to.

Update: VPN now works, script still doesn’t

Thanks for answering.
console.log(selectedGenre) prints <empty string>
I tried: let selectedGenre = 28; to see if that made a difference. After that I no longer get the error message but I also don’t get the results array I’m looking for. Neither the try or the catch code seems to run, I don’t get the console.logs from inside either.

Tried again with the original code, still doesn’t work but also no longer gives the error messages and I’ve waited for several minutes to see if they show up eventually like earlier.

I also have a hard time understanding how getMovies() is supposed to give me something before selecting a genre but I’m on step 16 and it says:

Blockquote
Still inside the try block, create an if statement that checks if the .ok property of the response object evaluates to a truthy value.
Inside the if statement, convert the response to a JSON object. Await the resolution of this method, and save it to a variable called jsonResponse.
Log the jsonResponse object to the console. To see your output in the console, you will need to call getMovies() after the function declaration. In the console, you’ll see a key called results that holds an array of all the movies in the first page of results.

Edit: Found the answer to why getMovies() didn’t work.
const response = fetch(urlToFetch); should be:
const response = await fetch(urlToFetch);
Guess I won’t be making that mistake again!

I’d still appreciate suggestions as to why getGenres()initially didn’t work since I didn’t make that mistake there, it just didn’t work and then suddenly after reloading the page it did. It is of course possible that I added the await without testing, left the computer and came back, posted the question and didn’t test until after that but I don’t think that’s what I did.

Edit 2: Aaand we’re back to nothing working again, after finishing the rest of the tasks I seem to be back to where I was at the first post. Not even getGenres() works now. NetworkError while trying to fetch resource. China is a bad country to live in while trying to learn web development