Great job making it this far!
In the previous exercise, we called the
fetch() function to make a GET request to the Datamuse API endpoint. Then, you chained a
.then() method and passed two callback functions as arguments — one to handle the promise if it resolves, and one to handle network errors if the promise is rejected.
In this exercise, we will chain another
.then() method, which will allow us to take the information that was returned with the promise and manipulate the webpage! Note that if there is an error returns in the first
.then() method, the second
.then() method will not execute.
At the end of the
.then() method, chain another
As the first argument of our second
.then() method, pass an anonymous arrow callback function that takes
jsonResponse as its single parameter.
Inside the callback function we just created, call the
renderRawResponse() function and pass in
jsonResponse as its argument. Run the code.
In the input field, type in a word and click the submit button.
If all went well, we should see an array of words that the Datamuse API responded with!
Note that you can find the
renderRawResponse() function declaration in public/helperFunctions.js.
Let’s format our response from the Datamuse API to look presentable on the webpage. To do this, we will use the
renderResponse() function that’s been defined in public/helperFunctions.js.
renderRawResponse(jsonResponse). Then below, call
Run your code.
Try the webpage again with another word!