Successfully completed "fetch() GET Requests III" but, it doesn't work.?

Language Help JavaScript
1

Hello Out There,

I successfully completed this tutorial on fetch() GET Requests III. I got green check boxes on all 10 steps but, no gold star for me. Reason: I type in a word like ‘dog’ into the web page shown in the 3rd window, I click the [SUBMIT] button and nothing happens. Actually, I noticed the problem on step 7. 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) => {
    return url+queryParams+wordQuery;
	}
  fetch(endpoint).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);

NOTE: I never did anything to the code in the helperFunctions.js tab. I don’t think the tutorial asked me to. From what I can tell, there is nothing in the main.js file that I was working in that makes reference to helperFunctions.js.

Does anyone have any insight into why the web page doesn’t produce any results?

Thanks a bunch.

2

update: in the next lesson " fetch() GET Requests IV", I believe the answer to the problem above is given. I compared it to my code. I noticed one difference and made the change.

My code was:

const endpoint = (url, queryParams, wordQuery) => {
    return url+queryParams+wordQuery;
	}

I changed it to:

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

The result is no different. It still doesn’t work.

Successfully completed step 2 of “fetch() GET Requests IV” which says "In the input field, you can type in a word and click the submit button.

Step 2 in the tutorial says "If all went well, you should see an array of words that the Datamuse API responded with!"

It still doesn’t work. hmmm.:thinking:

Hours later…

I finished the course " fetch() GET Requests IV". I have all green check boxes and the web page doesn’t work when i enter a word and click submit. Something is wrong with this tutorial.

3

Show us your code again, please and we can try to give it go on this end.

4

thanks for looking into this. 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) => {
    return url+queryParams+wordQuery;
	}
  fetch(endpoint).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);
5

Shouldn’t that be a string?

const endpoint = `${url}${queryParams}${wordQuery}`;
6

Thank you Roy. I tried that and variations of what you replied with. I’m moving on at this point. I learned a great deal so far. I’m not worried about this one exercise.