Accessing Fetched API results for Chuck Norris Quotes

Hello. First off i want to say thank you for anyone taking the time to read this. This particular side project was inspired by the Wanderlust project to see if I truly understand how to use Fetch.

However, although I can load my JSON data from the //immediate section of the code, and load it to the DOM. Whenever I attempt to query the array of results based on a Keyword. I cannot seem to access the key value pair from the JSON data that will allow me to append the result to the DOM. What seems to be missing from my code that will allow me to do this. I’ve saved the file data to a JsFiddle Link below. please help.

https://jsfiddle.net/dbugtestideas30/9v7mq4cr/3/

Hi @theeissorcer51386311
your function queryAQuote receives the object you need, just the chaining within the try-catch block doesn’t work. You could separate that:

const queryAQuote = async() => {
    const searchQuote = 'https://api.chucknorris.io/jokes/search?query=';
    const wordQuery = inputValue.value; 
    const endpoint = `${searchQuote}${wordQuery}`;
    const response = await fetch(endpoint)
    	.then((response) => {
      	return response.json(); 
      })
			.then(jsonResponse => {
    		const results = jsonResponse;
			});
    return response
}

async function onClick () {
	try {
    const results = await queryAQuote();
    renderResults(results);
	}
  catch (e) {
        console.log('ErRor')
        console.log(e); 
    }
}

In your function renderResults you have a forEach in a for loop.
What you get passed as an argument into your function is an object which holds the array as a value of the key named ‘result’. You need to iterate over that array just once.
The array also holds objects, one for each result. And you need to access the property ‘value’.
You access the array and the value with dot notation:

results.result.forEach(result => {
        const element = document.createElement("li");
        element.innerText = result.value;
        getResults.appendChild(element);
})

Thank you for responding, but this didn’t fix it for me. It threw a new error:
results.result is undefined. I take it to mean it could not access the result property of the object passed to the renderResults() function? Would i have to know the name of the object that this particular API accepts to allow me to access it? Because i’ve tried results.Object.result, results.Object[0].result, and even results.object.result. It hasn’t worked yet.

Could you post your new code or a link to the updated program?

Yes I’ll post the link to collaborate, and the link to the independent session through JS Fiddle.

Collab: https://jsfiddle.net/Yes2inity/m6bq10pv/#&togetherjs=jTnfD7dR1g
Independent: https://jsfiddle.net/Yes2inity/m6bq10pv/

I’ve tried to stringify it in this one because I read that if the property of the object we’re attempting to access is a string, and we’re trying to access it as a variable it wont work. Ive tried both JSON.stringify and JSON.parse. Neither worked.

Here is the solution you’ve given me. It loads results in JS fiddle without throwing an error, but open it up in text editor like VS code, and when you open inspect in your browser it throws the error: Uncaught (in promise) TypeError: results.result is undefined

https://jsfiddle.net/Yes2inity/m6bq10pv/2/

The code in this Fiddle is not the solution I suggested. In the Fiddle it’s not rendering either, the results are just logged in the console. I’ve written the onClick function as an asynchronous function as well:

async function onClick () {
	try {
    const results = await queryAQuote();
    renderResults(results);
	}
  catch (e) {
        console.log('ErRor')
        console.log(e); 
    }
}

In your Fiddle:

const onClick = () => { 
    const results = queryAQuote();
    console.log(results);
    inputValue.value = '';
    renderResults(results);
}

Yes I’ve used all the solutions you’ve gave me including this one. It doesn’t seem possible that we can render the results of this particular JSON data structure. One reason according to my research is that it won’t render is because of the ‘trailing commas’ that are within the data structure which will not render unless removed. Another is because the potential that the targeted array is not considered accessible by our .forEach method due to not actually being a property, but a nested object.

In both cases, I’ve tried using the .replace method on JSON.stringify to remove the trailing commas, and I’ve tried JSON.parse to convert the promise object to make its properties accessible to us in the .forEach method. All of which still will not render. I hope I’m incorrect in my assessment that certain data structures do not yield to rendering because of how they’re constructed by their creators, but it appears this is the conclusion I’m drawn to. Unless you know for sure this isn’t the case?

Bildschirmfoto 2021-05-20 um 18.33.27
That’s what it should look like, right? I haven’t checked your JSON responses in detail, but it seems to work fine.
https://jsfiddle.net/mirja_t/96y2dh7g/7/

Forgive me for not understanding. What in this code allows it to run that’s different from the code I’ve sent back to you? The only line I see different is Line 27? Do you mind sharing what you did to make it work?

Nvm I see it was the missing renderResponse(results) at line 17. Thank you for your help

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.