In the previous exercise, we created the boilerplate code for making a GET request using async
and await
.
In this exercise, you’re going to build on previously created boilerplate code to get nouns that describe the inputted word from the Datamuse API:
Instructions
Under the comment “AJAX function”, create a new arrow function called getSuggestions()
using the async
keyword.
You’ll be coding inside the arrow function of const getSuggestions
for the remainder of this exercise.
Inside the code block of the async
arrow function, create a const
variable named wordQuery
and assign it inputField.value
.
Create another const
called endpoint
, assign it value of a string that is url
, queryParams
, and wordQuery
concatenated in that order.
Add a try
statement with an empty code block. Outside the code block for try, add a catch(error)
statement with a code block that logs error
to the console.
Inside the try
code block, using const
, create a variable named response
and assign it to await
the result of calling fetch()
with endpoint
as the first argument. For this API to work within the provided browser, add {cache: 'no-cache'}
as the second argument.
Below the variable response
from the previous step, create a conditional statement that the checks if the ok
property of the response
evaluates to a truthy value.
Inside the code block of the conditional statement, await
response.json()
and save it to a variable called jsonResponse
using the const
keyword.
Call the function renderRawResponse()
and pass in jsonResponse
. Then, run the code.
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!
You can view the purpose of the renderRawResponse
helper function at public/helperFunctions.js.
Now that you can see the body of response
, you should clean it up to display on the webpage.
Delete renderRawResponse(jsonResponse)
and replace it with renderResponse(jsonResponse)
. 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!
You can view the purpose of renderResponse
function at public/helperFunctions.js.