FAQ: Requests with Fetch API - Handling a GET Request

This community-built FAQ covers the “Handling a GET Request” exercise from the lesson “Requests with Fetch API”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Full-stack Engineering for your Business
Create a Front-End App with React

Learn Intermediate JavaScript

FAQs on the exercise Handling a GET Request

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Did anyone else have to delete the first line (which is a comment) for the code to work?


Yes, I had to do that as well. How did you figure out that’s what needed to happen for the code to work?

I looked up the error in my browser’s console [in developer tools] … it said there was an error on line 1.

1 Like

I wasn’t able to progress beyond step one despite my code matching everything in the solution. To circumvent that I opted to copy the code but that subsequently filled in the checks for the next two steps so I feel cheated out of this.

Hi okrashiso,
I came across the same issue as yours. Try everything I can do but still cannot pass the first step. And end up with copying the solution code. I guess it’s a bug.

Thank you for this!

I deleted the comment at the top and eventually managed to work through the content. Very frustrating as lost a lot of time on this exercise wondering what I had done wrong.

QUESTION: In this exercise, we use functions from the helperFunctions.js but I don’t see anywhere they were exported nor imported into main.js.

is there some global way to make functions available everywhere I don’t know of?


I have the exact same question. I would also like to run this locally but can’t figure out where the /public directory should be so this runs.


Hello mate, figured they linked both javascript files in the HTML head, so basically allowing the lastly added script to have all the declarations in the first script.

Guess this is a simple way to go around importing. but still, on a larger scale, you will be loading scripts you really don’t need into a page, so importing is still the best approach as it brings in just what is needed.

1 Like

But that doesn’t make sense because the file with all the functions, helperFunctions.js, is loaded in the HTML last. Meaning main.js should have a bunch of ReferenceErrors. I don’t get how everything still works but it does lol

1 Like

I don’t know much about this stuff, but I don’t see why main.js should have Reference Errors.

Looking at the index.html file (via the folder icon), the scripts are placed at the bottom just before the closing body tag. So, the html elements in the page will be created before the scripts are executed. helperFunctions.js is indeed placed after main.js, but only the getSuggestions() function in main.js tries to access a helper function. getSuggestions is only called by the displaySuggestions function, and displaySuggestions doesn’t get triggered till the submit button is clicked. Even though main.js doesn’t know about helper functions yet, but it won’t throw a reference error until an actual call to an unknown helper function is made. But getSuggestions is an asynchronous function, so by the time a call to a helper function is made, helperFunctions.js would have loaded.
The above is just my thought process. As I said, I don’t know much about this, so I can be wrong.

I see, yeah it makes sense that it wouldn’t result in a reference error due to the event listener. I wonder if eventListeners are asynchronous themselves?

By the way, what’s going on in the renderResponse function in helperFunctions.js ? It says this

  // Handles if res is falsey

If res is falsy, and falsy values are either 0, NaN, undefined, null, false or "", then how can it have a status property?

I think it is not to be taken literally. =)
We use helper’s function renderResponse in .then() callback function.
In this then() we’ve got resolved Promise from previous .then() with response.json() value. This value is not JSON, it’s any js object that can be represented by json, ei objects, arrays, string ect. and put it into renderResponse().
If we get falsey res then console.log(res.status) triggers an Error “Cannot read properties of null (reading ‘status’)”. It’s what we needed). But we’ll get another error:

helperFunctions.js:6 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘status’)
at renderResponse (helperFunctions.js:6:21)
at main.js:27:9

Because of any exception in .then() will return rejected Promise. We don’t have appropriate .catch() handler for the rejection, we get Uncaught (in promise).

The behavior of the handler function follows a specific set of rules. If a handler function:

throws an error, the promise returned by then gets rejected with the thrown error as its valu.

You can test it. Add res = null;

const renderResponse = (res) => {
  // Handles if res is falsey
  res = null;//<<<<<<---------

PS: or there is a typo))) if res = false or 0, we console.log → undefined.

Hi everyone!
Question: How the main.js interaction with HelperFunction.js if HelperFunction.js was not exported and imported to main.js

I hope I can get a clarification :neutral_face: :neutral_face:. I’ve studied HTML, CSS, and Basic JS which I continued to an Advanced JS course. I can follow the instructions for this chapter’s exercises but am I supposed to understand how the whole Datamuse API program works? The whole and every detail of the sample program? I am kinda surprised that the lesson went to this from this. Please help me understand.

I don’t think you’re supposed to know the whole “how” Datamuse API program works. The extra file i.e., the helper file is only for your curiosity as to what renderResponse() could be.

Focus on the challenges and don’t worry so much :slight_smile:

I was thinking about that too. But I can’t help it :no_mouth: :no_mouth: I am worried that maybe someday I will bump into a similar scenario in the future or it will be asked in an interview as a test =( Furthermore, whenever I open files that aren’t supposed to be opened up, I see comments in the code from Codecademy and I will get curious and tell myself things like “Why Codecademy putting comments in this? Why are they explaining how this snippet functions?”.

This mindset will make me take longer duration to finish this course =( It feels like I will not be competent enough without tweaking things in details =(

But yeah, I will try my best not to worry too much =(

We seriously need to understand why there were no imports nor exports and it still worked. HTML-linked? We weren’t introduced to that yet, so why would they do this to us?