FAQ: Requests II - async GET Requests III

Frequently Asked Questions JavaScript FAQ
1

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

This community-built FAQ covers the “async GET Requests III” exercise from the lesson “Requests II”.

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

Web Development

Introduction To JavaScript

FAQs on the exercise async GET Requests III

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!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

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

Code isn’t reflecting in webpage

// Information to reach API
const url = 'https://api.datamuse.com/words?’;
const queryParams = ‘rel_jja=’;

// Selecting page elements
const inputField = document.querySelector(’#input’);
const submit = document.querySelector(’#submit’);
const responseField = document.querySelector(’#responseField’);

// AJAX function
const getSuggestions = async () => {
const wordQuery = inputField.value
const endpoint = url + queryParams + wordQuery
try {
const response = await fetch(endpoint)
if(response.ok === ‘true’) {
const jsonResponse = await response.json()
renderResponse(jsonResponse)
}
}
catch(error) {
console.log(error)
}
};

// Clear previous results and display results to webpage
const displaySuggestions = (event) => {
event.preventDefault();
while(responseField.firstChild){
responseField.removeChild(responseField.firstChild)
}
getSuggestions();
}
submit.addEventListener(‘click’, displaySuggestions);

Okay, I followed this exercise I have no syntax errors but this code is not reflecting on the webpage.
Even though in the last two exercises the following statements are made:

  1. “In the response field, type in a word and click the submit button on the web page.
    You should now see an array of objects that contain nouns that describe the word you typed in!”

  2. “Run the code. Then type in another word and click the submit button.
    Great, now you have an organized list of words and you finished your GET request!”

But with this exact code and passing the exercises with no syntax errors the website remains completely unchanged and typing in words does nothing.

There is another file full of helper codes next to the file I’m working in if that makes a difference, but with what I’m working on in this exercise it’s saying that the code I wrote above should affect the webpage and it isn’t.

I would be incredibly grateful if an experienced coder could tell me what I’m missing in this exercise. In a few other exercises the most I’ve ever gotten to show up are the curly brackets {} in the output field.

1 Like
3

Your code is really close. This part has the only problem I see:

if(response.ok === 'true') {
  const jsonResponse = await response.json()
  renderResponse(jsonResponse)
}

In response.ok === 'true', you’re using the identity operator (===) to see if response.ok is a string reading “true”.

The problem is, response.ok is not a string at all; it is a boolean. That makes your if condition automatically false, because === only returns true if the items on both sides share the same type.

So since your if condition is false, renderResponse doesn’t get called and nothing displays on the page.

You can fix it by changing if(response.ok === 'true') to one of these:

if(response.ok === true)

if(response.ok)
3 Likes
4

Hi there. Having the same problem as geenadavis, and I have used the if (response.ok) suggestion, but nothing is showing up on the web page. Any thoughts anyone?

1 Like
5

All sorted - I needed to call the renderRawResponse() function within the if conditional statement

1 Like
6

I’ve called the renderRawResponse() function within the if conditional statement but I’m also not getting any sort of output.

Looking through “helperFunctions.js” indicates that a response should have some sort of output within localhost

2 Likes
7

At the end of the exercise I"m getting words as output on the screen, formatted correctly…but the words they show have nothing to do with the word I typed in

doesnt work
doesnt work464×590 9.14 KB

8

Hi everyone there.
I have one question about GET Request exercises. We have different callback functions to render our result so i wondering what will be output of result for exemple in renderResponse. If we just enter and leave blank input we got message there where no suggestion and that’s fine cuz response.length is 0.
I added one line of code to see wich number will i have:

responseField.innerHTML = jsonResponse.length;

So if i typed for example javascript, i got back number 9. Can somebody explain what that number means?
in browser when i typed https://api.datamuse.com/words?rel_jjb=javascript i got an array with lot of objects

[{“word”:“basic”,“score”:1001},{“word”:“side”,“score”:1000},{“word”:“non”,“score”:999},{“word”:“little”,“score”:998},{“word”:“simple”,“score”:997},{“word”:“malicious”,“score”:996},{“word”:“standard”,“score”:995},{“word”:“dynamic”,“score”:994},{“word”:“pure”,“score”:993},{“word”:“asynchronous”,“score”:992},{“word”:“necessary”,“score”:991},{“word”:“external”,“score”:990},{“word”:“embedded”,“score”:989},{“word”:“unobtrusive”,“score”:988},{“word”:“complex”,“score”:987},{“word”:“based”,“score”:986},{“word”:“select”,“score”:985},{“word”:“additional”,“score”:984},{“word”:“appropriate”,“score”:983},{“word”:“inline”,“score”:982},{“word”:“visual”,“score”:981},{“word”:“raw”,“score”:980},{“word”:“oriented”,“score”:979},{“word”:“ahead”,“score”:978},{“word”:“predefined”,“score”:977},{“word”:“legal”,“score”:976},{“word”:“plain”,“score”:975},{“word”:“note”,“score”:974},{“word”:“valid”,“score”:973},{“word”:“arbitrary”,“score”:972},{“word”:“unmanaged”,“score”:971},{“word”:“clientside”,“score”:970},{“word”:“hide”,“score”:969},{“word”:“advanced”,“score”:968},{“word”:“native”,“score”:967},{“word”:“customized”,“score”:966},{“word”:“enough”,“score”:965},{“word”:“summary”,“score”:964},{“word”:“nifty”,“score”:963},{“word”:“requisite”,“score”:962},{“word”:“slick”,“score”:961},{“word”:“disable”,“score”:960}]

I can’t find any explanation from where that number came from.
Thanks

9

I have a question about the cache:no-cache attribute in the object that is passed into the fetch() function. Is it a HTTP header? Why is it needed for the program to work within the provided browser?

1 Like
10

Same question here. Would love to know what is it for, thank you.

11

I noticed the same with certain words but for the most part if works. Try a different word. I’m unsure on the algorithm the api uses but I’m sure there’s sense to it.

12

I found this on MDN but I still need to do some research into what cache means as a header -

The response may be stored by any cache, even if the response is normally non-cacheable. However, the stored response MUST always go through validation with the origin server first before using it, therefore, you cannot use no-cache in-conjunction with immutable . If you mean to not store the response in any cache, use no-store instead. This directive is not effective in preventing caches from storing your response."

13

how renderResponse method work without import or anything?

14

Is it just me or does this code seem incomplete? In the previous projects we have specifically returned the response in the if conditional statement and added a throw new Error('error message') below it to handle the errors. But the steps involved and the solution provided don’t seem to include it. Therefore am I right in thinking that the catch isn’t actually going to do anything?

// Information to reach API
const url = 'https://api.datamuse.com/words?';
const queryParams = 'rel_jja=';

// Selecting page elements
const inputField = document.querySelector('#input');
const submit = document.querySelector('#submit');
const responseField = document.querySelector('#responseField');

// AJAX function
// Code goes here
const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  try {
    const response = await fetch(endpoint, {cache: 'no-cache'});
    if(response.ok){
      const jsonResponse = await response.json();
      renderResponse(jsonResponse);                         // shouldn't this be returned?/
    }  
 // shouldn't there be a 'throw new Error('error message') here??
  } catch (error) {
    console.log(error);
  }
}

// Clear previous results and display results to webpage
const displaySuggestions = (event) => {
  event.preventDefault();
  while(responseField.firstChild){
    responseField.removeChild(responseField.firstChild);
  }
  getSuggestions();
}

submit.addEventListener('click', displaySuggestions);
1 Like
15

Hey can somebody please help me, on step 6. Im not really sure why my code is not working.

const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = url + queryParams + wordQuery;
try {
const response = await fetch(endpoint, {
cache: ‘no-cache’
}
if (response.ok) {
const jsonResponse = await response.json()
});
} catch (error) {
console.log(error)
}
}

16

can anyone explain this?
what is firstchild and removechild ,how this works?

while(responseField.firstChild){

    responseField.removeChild(responseField.firstChild);

  }
17

Hi!
What this is simply doing is using a while loop or while conditional statement to remove the firstchild of the response field.
We’re having this to clear everything from the previous search before rendering our new response.

FIRST CHILD is a CSS pseudo-element for selecting the first element among a group of sibling elements.
You can check it out Here

I hope this helps.

2 Likes
18

Ok, got it.
Thanks :star_struck:

19

I’m having the same issue…

are we not missing an api key in this project? I’m quite confused here…

// Information to reach API

const url = 'https://api.datamuse.com/words?’;

const queryParams = ‘rel_jja=’;

// Selecting page elements

const inputField = document.querySelector(’#input’);

const submit = document.querySelector(’#submit’);

const responseField = document.querySelector(’#responseField’);

// AJAX function

// Code goes here

const getSuggestions = async () => {

const wordQuery = inputField.value;

const endpoint = console.log(url + ’ ’ + queryParams + ’ ’ + wordQuery)

try {

const response = await fetch(endpoint,{cache: 'no-cache'})

if(response.ok){

  const jsonResponse = await response.json()

  renderResponse(jsonResponse)

}

}

catch (error) {

console.log(error)

}

};

// Clear previous results and display results to webpage

const displaySuggestions = (event) => {

event.preventDefault();

while(responseField.firstChild){

responseField.removeChild(responseField.firstChild)

}

getSuggestions();

}

submit.addEventListener(‘click’, displaySuggestions);

20

@ip_ah_man , how about replacing

const endpoint = console.log(url + ’ ’ + queryParams + ’ ’ + wordQuery)

with

const endpoint = url + queryParams + wordQuery

Explanation:

  • the string endpoint is used as a parameter to the GET request
  • your code prints out the concatenation of 3 strings, adding a white space between them, and stores the returned value of console.log in the string endpoint
  • console.log doesn’t return anything, so endpoint is undefined
  • so when you send out the GET request, its parameter is undefined and nothing happens
  • what is actually expected is that you simply concatenate the 3 strings into the string endpoint