Solve API

I’m having trouble solving the problem with the API response. Here are the instructions. Here is the HTML page and JavaScript. I did run the code, but it turns out I got it wrong. I need to fix the “try statement”, “fetch() function”, and “endpoint”. I was hoping you could help me solve the code.

Below is an application that retrieves data from the Datamuse API.

Modify getSuggestions() to be an asynchronous function. Then, inside the try statement, use fetch() to retrieve an API response using the endpoint variable. Make sure the cache parameter is set to 'no-cache'.

If the API call results in a successful response, render the .json() response using renderResponse() function.

HTML

The Ocean Is…

The ocean is…

JavaScript
// Information to reach API
const url = ‘https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
const wordQuery = ‘ocean’;

// modify getSuggestions to be async
const getSuggestions = async () => {
const endpoint = ${url} ${queryParams}${wordQuery};
try {
// fetch response from endpoint
const response = await fetch [const renderResponse = fetch]
(endpoint, {cache: ‘no-cache’});
// if successful response, get json and render using renderResponse() function
if(response.ok) { [if(renderResponse.ok)]
const josnResponse = await [const renderResponse = await]
response.json() [renderResponse.json()]
}
} catch (error) {
console.log(error);
}
}

const renderResponse = (res) => {
let responseParagraph = document.getElementById(‘response’);
for(let i = 0; i < 10; i++){
let newP = document.createElement(‘P’);
newP.innerHTML = res[i].word;
responseParagraph.append(newP);
}
}

getSuggestions();

JavaScript (Modify) Still not the right answer.
// Information to reach API
const url = ‘https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
const wordQuery = ‘ocean’;

// modify getSuggestions to be async
const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = ${url}${queryParams}${wordQuery};
try {
// fetch response from endpoint
const response = await fetch(endpoint,{cache: ‘no-cache’});
// if successful response, get json and render using renderResponse() function
if(response.ok){
const jsonResponse = await response.json();
renderResponse(jsonResponse);
}
} catch (error) {
console.log(error);
}
}

const renderResponse = (res) => {
let responseParagraph = document.getElementById(‘response’);
for(let i = 0; i < 10; i++){
let newP = document.createElement(‘P’);
newP.innerHTML = res[i].word;
responseParagraph.append(newP);
}
}

getSuggestions();

are you receiving data from your fetch request? or is it not sucessful?

i have checked your fetch request, i dont understand the cache stuff but here is the working request?
const url = ‘https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
const wordQuery = ‘ocean’;
const endpoint = ${url}${queryParams}${wordQuery};

// modify getSuggestions to be async
const getSuggestions = async () => {

const response = await fetch(endpoint)

try {
// fetch response from endpoint
if(response.ok){
const jsonResponse = await response.json()
console.log(jsonResponse)

}

}
// if successful response, get json and render using renderResponse() function
catch (error) {
console.log(error);
}
}
getSuggestions()

this does the same thing but written abit diff

const baseUrl = ‘https://api.datamuse.com’;
const endpoint = ‘/words?’;
const params = new URLSearchParams({
‘ml’: ‘ocean’
});

const finalUrl = ${baseUrl}${endpoint}${params}

const generate = async()=>{
const response = await fetch(finalUrl)

try {
    if(response.ok){
        const data = await response.json()
        console.log(data) 
    }
    
} catch(error) {
    console.error('error')
    
}

}
generate()

I have solved the answer.
// Information to reach API
const url = ‘https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
const wordQuery = ‘ocean’;

// modify getSuggestions to be async
const getSuggestions = async () => {
const endpoint = ${url}${queryParams}${wordQuery};
try {
// fetch response from endpoint
fetch(endpoint, {cache: ‘no-cache’}).then(response => {
if (response.ok) {
return response.json();
}
})
// if successful response, get json and render using renderResponse() function
if(response.ok){
const jsonResponse = await response.json();
renderResponse(jsonResponse);
}
} catch (error) {
console.log(error);
}
}

const renderResponse = (res) => {
let responseParagraph = document.getElementById(‘response’);
for(let i = 0; i < 10; i++){
let newP = document.createElement(‘P’);
newP.innerHTML = res[i].word;
responseParagraph.append(newP);
}
}

getSuggestions();