XHR GET Requests III, 5/10 no word suggestions?


#1

I don’t get an error, but there seems to be no response from api.datamuse.com (the RawResponse is an empty array).
What’s wrong? Thanks a lot!

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

// Selecting 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);
	const endpoint = (`${url} ${queryParams} ${wordQuery}`);
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      renderResponse(xhr.response)
    }
  };
  xhr.open('GET', endpoint);
  xhr.send();
};

// 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);

#2

there are spaces in your endpoint variable, if you visit:

https://api.datamuse.com/words? rel_rhy= test

you will see its not working, while if you visit:

https://api.datamuse.com/words?rel_rhy=test

in the browser, it will work.


#3

@stetim94 Thank you so much!!!

I didn’t know it’s possible to call the api like that.

And as you see from my code I had trouble concatenating (?!) the endpoint variable anyway.
I followed the hint in the course, which uses spaces (for a console log).
I must have missed somewhere the syntax the api wants.

I"ve read other posts related to xhr requests and they say the url shortener won’t work.
Do you know of that, so, should I be prepared for the rest of “requests III” not to work?

Thank you!


#4

Remove the spaces from your template and it will be a complete URL with params and query string as expected.


#5

@mtf : Thanks, Roy.
stetim94 wrote the same, so I did that, and it works.

I did not know the string had to be without spaces.

Thank you for your help!


#6

if the string is a web-address, then yes. I mean, visiting face book.com also wouldn’t work


#7

Sorry… I did not understand what “endpoint” is supposed to do - I have never heard of APIs before, and I did not realize all information/query parameters are part of an url!
That ‘url’ is an url is obvious, but I had no clue how queryParams and wordQuery would ‘tell’ the API what to look for… I thought they would somehow be sent to the API as separate parameters…

A lot to learn, I know.
Thanks!!


#8

then maybe its wise to look into what an api is?

for example if we google codecademy we get:

https://www.google.com/search?q=codecademy

i slightly shorten the url, but as we can see we request the search page, with a query (q) parameter, and a value of codecademy.

if we wanted to search for facebook we could do:

https://www.google.com/search?q=facebook

so we can specify the word we want to search for in the url, its the same with the API you are using.


#9

Yes, of course you are right!

To my defense: I see query strings are introduced in the next exercise.
So, at that point it looks even more dumb I did not understand.

I made a post the other day, “new and overwhelmed” - so much is new, and foreign words everywhere; I looked up definitions of api, but it left me no wiser.

Your examples with Google searches are a good explanation.


#10

This topic was automatically closed after 7 days. New replies are no longer allowed.