In the previous exercise, we went over the boilerplate code for a GET request using fetch()
and .then()
. In this exercise, we’re going to apply that code to access the Datamuse API and render the fetched information in the browser.
The Datamuse API is a word-finding query engine for developers. It can be used in apps to find words that match a given set of constraints that are likely in a given context.
If the request is successful, we’ll get back an array of words that sound like the word we typed into the input field.
We may get some errors as we complete each step. This is because sometimes we’ve split a single step into one or more steps to make it easier to follow. By the end, we should be getting no errors.
Instructions
At the top of main.js, create a const
variable called url
. Assign url
to the following URL as a string:
https://api.datamuse.com/words?sl=
The ?sl=
portion of the string will be the start of your query string, which will be used to pass parameters to the Datamuse API. The query string will be used by the engine to narrow the search to words that sound like your word.
Inside the getSuggestions()
function, create a const
variable called wordQuery
and assign it inputField.value
.
We’ll need wordQuery
to store the value of what is being typed into the input field.
Create another const
variable called endpoint
and assign it the value of a string that is url
, and wordQuery
concatenated in that order.
We will be working inside getSuggestions()
function for the remainder of this exercise.
Inside the getSuggestions()
function, call the fetch()
function and pass in endpoint
as an argument. For this API to work within the Codecademy browser, add {cache: 'no-cache'}
as the second argument.
Chain a .then()
method to the fetch()
function. Pass an arrow callback function as its argument. The callback function should take response
as its single parameter.
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, return response.json()
.
By returning response.json()
, the next .then()
method chained to it will receive a Promise with JSON data.
Below the condition’s code block, throw
an Error
stating 'Request failed!'
to raise an exception if the request failed.
Next, we will add a second argument to the .then()
method to add another callback function to handle errors. Create an arrow function that takes one parameter, networkError
.
In the code block of the arrow function, log networkError.message
to the console.
Note that we will continue to add to this code in the next exercise to manipulate the webpage to see the word suggestions from Datamuse. The submit button will not return anything yet.