FAQ: Requests II - fetch() 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 “fetch() 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 fetch() 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

Why in the case of Fetch’s “if” we don’t need to use “else”?

if (response.ok) {
      return response.json()
    } 
    throw new Error('Request failed!')
1 Like
3

I think because if the response is ok the “return” will end that code section before it gets to throwing the error.

2 Likes
4

I having trouble with the fetch()GET III lesson. in step 7;

.

Inside the success callback function, create a conditional statement that checks if the ok property of the response object evaluates to a truthy value. If so, call the function renderJsonResponse() and pass in response as an argument. Then, run your code.

Then type in a word to and click the submit button to view the JSON that came back. The status of the promise return from fetch() will be resolved.

I have this but it’s not working;

const getSuggestions = () => {

const wordQuery = inputField.value

const endpoint = ${url}${queryParams}${wordQuery}

fetch(endpoint).then(response => {

if(response.ok) return renderJsonResponse(response);

})

}

can you help me?, thanks

2 Likes
5

hi

i type this code to pass this step:

fetch(endpoint).then(response => {
    if(response.ok) {
      renderJsonResponse(response);
    }
  })
2 Likes
6

Isn’t that the same as the code I used? Looks like it’s the same to me and when I used it, it wouldn’t pass me to step 8

7

When I click on get solution, they did use curly braces around the “return renderJsonResponse(response)

Your solution does not work and it took you 5 days to get back to me. Speed up the process and give me a correct answer of fix the site

8

Sorry I should said they did NOT use curly braces

9

You are missing the opening curly brace following your if(response.ok) condition. Also the instructions ask you to call the renderJsonResponse() function with response as the argument, but do not ask you to return it. Delete return, add the curly brace, and it should work. Good luck && Happy Coding!

1 Like
10

ok it worked but i have no idea what the ■■■■ is going on. this whole chapter baffles me. The solutions they give in the hints are quite different than the solutions they give if you click on the get solution button. I’m totally confused. What can I do? i really want to finish this course but i think my subscription runs out in june. do i really have to know all this crap to make money building websites for people?

11

sorry chadrew i’m a novice but the code i given to you worked well for me. Maybe it is just a simple syntax error. sorry if i disturbed you. i just wanted to help you because i really passed this step with this code. Good luck for the future.

12

thx a lot for the help.:+1:

13

in the absence of else, the statement following ‘if’ will always be executed hence whether you use else or not does not matter, it will be executed.
in this example if the ‘if’ condition is true ( I mean response.ok === TRUE) it will execute ’ return response.json()’, and once this line is executed, execution will stop on this line itself, that’s the beauty of return statement.

Statement “throw new Error(‘Request failed!’)” will be executed if the ‘if (response.ok)’ is false.

14

Where do I put my error call back function?

const getSuggestions = () => {
const wordQuery = inputField.value;
const endpoint = ${url} + ${queryParams} + ${wordQuery};

fetch(endpoint, {cache: ‘no-cache’})
.then(response => {
if (response.ok) {
return response.json();
} HERE1
throw new Error(‘Request failed!’);
HERE 2
} HERE 3)
}

i believe it should be here 3?

EDIT: i figured it out! it should be here3!

1 Like
15

Hi @Midlindner ,
The content doesn’t clearly mention that response.body (where all the data returned from the API lie)is not directly accessible from response object. Instead, we use the method response.json() to access these data. For a beginner like me, it took a lot of time to figure this out. How can this feedback be passed to the content team?

1 Like
16

I did everything to codecademy’s satisfaction and earned my blue-green check boxes, but the page is completely unresponsive. the datamuse website is not down. I popped open the DOM console, and found this solicitation from codecademy: “:wave: Hi there!
While you’re here, how about popping over to https://codecademy.com/about/careers?
We’re hiring for passionate, talented engineers, and would love to hear from you! :sparkles:” - but no obvious errors. I wish I knew why it isn’t working! Here’s my code: // Information to reach API
const url = ‘https://api.datamuse.com/words’;
const queryParams = ‘?sl=’;

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

// AJAX function
const getSuggestions = () => {
const wordQuery = inputField.value;
const endpoint = url + queryParams + wordQuery;
fetch(endpoint, {cache: ‘no-cache’}).then(response =>{
if(response.ok) {
return response.json();
} throw new Error(‘Request failed!’);
}, networkError => {
console.log(networkError.message);
});
};

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

submit.addEventListener(‘click’, displaySuggestions);

17

soo… somehow I missed that the page is indeed not supposed to be functional yet. lol

2 Likes
18

It seems pointless that exercise #4 and 5 are split. I spent a lot of time after completing #4 trying to figure out why it wasn’t working. I think spent more time trying to debug code that had no bugs, than I did on exercise #5. :pouting_cat:

1 Like
19

I couldn’t get the code in this example to run properly. I get ‘green ticks’ down the left margin but when I run the example code, it just returns a ‘blank’ response. This is the code I’m using …

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

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

// AJAX function
const getSuggestions = () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  fetch(endpoint, {cache: 'no-cache'}).then(response => {
    if (response.ok) {
    return response.json();
  }
  throw new Error('Request failed!');
  },(networkError) => {
    console.log(networkError.message);
  }
  );
}

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

submit.addEventListener('click', displaySuggestions);

Interestingly, the reponse I got using the…

renderJsonResponse(response)

did produce an output but wasnt’ what I expected…

{"type":"cors", 
"url":"https://api.datamuse.com/words?sl=hello", 
"redirected":false, 
"status":200, 
"ok":true, 
"statusText":"OK", 
"headers":{}, 
"body":{}, 
"bodyUsed":false}

Is this a bug or am I doing something wrong?

Thanks.

1 Like
20

I was blocked at exercice 6, impossible to go through even with the Hint.

I tried

fetch(endpoint, {cache: 'no-cache'}).then(response => {}

and

fetch(endpoint, {cache: 'no-cache'}).then(response => {
if (response.ok) {
    return response.json();
  }
}

none of them work. I had to copy code from here to go through and continue :frowning:

1 Like