FAQ: Requests with Fetch API - Making an async GET Request

FAQ Uncategorized
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Making an async 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 Making an async 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!

2

shouldn’t we throw an error ?

3

What’s going on in the renderResponse() helper function? The first 2 if statements to be specific
Is the function parameter meant to be an object or array, I’m lost

4

Object is object and array is object too.
the function’s parameter is an array of objects:

[{word: "scratch", score: 1001}, {word: "disease", score: 1000}, {word: "fish", score: 999},…]

About the first if I wrote my thoughts two lessons ago=)
The second if checks that array has at least one element in it. If (res.length = 0) then Try again!

5

Why do we need the second await statement await response.json()?

Are we not already awaiting response? Seems to work without it.

1 Like
6

What does the .firstChild() and .removeChild() do at the bottom of the program?

7

In the html, the div in which the results are to be displayed will be:

<div id="responseField">
</div>

There is an event listener attached to the "submit" button. When the submit button is clicked, displaySuggestions is called.

const displaySuggestions = (event) => {
  event.preventDefault();
  while(responseField.firstChild){
    responseField.removeChild(responseField.firstChild)
  }
  getSuggestions();
}

If the responseField div is empty, then we execute the getSuggestions function.

However, if the results from a previous word search OR some message is present in the div, then we want to clear the div so that we can display the results of the new search.

If there are results from a previous search in the responseField div, then there will be an ordered list with a number of <li> elements. These are considered as the children of the responseField div (parent) element.

If the previous search didn’t return any results, then the responseField will be displaying "<p>Try again!</p><p>There were no suggestions found!</p>". These two <p> elements will be the children of the responseField div in this situation.

See the function renderResponse in the helperFunctions.js file to see how the responseField is being populated.

Elements, whitespace and comments if present all qualify as children.

After the submit button is clicked for new search, removeChild removes the first child of the responseField div. It keeps looping [because of the condition while (responseField.firstChild)] till all children of the responseField div are removed. Once that happens and the div has no more children, then null is returned which means the while condition is no longer true. With the responseField div wiped clean, getSuggestions() is called to process and display the new search results.

See documentation for more details:
https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild