Wanderlust, async func not returning object, returns a HTML section instead?

Projects
1

Hi all,

Can’t find another entry for this so thought I’d give it a go raising a new topic.

As the title says, I’m on step 32 trying to render the Venues. However, I get an error “Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘venue.categories’)”

After much head scratching I have only managed to narrow it down to the source but can’t figure out the cause? In the asynchronous function getVenues(), the fetch() is successful and the JSON is trimmed down to the array of venue objects that you need and stored to the variable “venues” - console.log’ing this immediately after the variable declaration for venues inside the try{ } section shows the array of venue objects, however, on the las line of the try{ } section I have “return venues” and this does not return the array of objects. it returns the following HTML:

<section id="venues"> <div class="venue" id="venue1"></div> <div class="venue" id="venue2"></div> <div class="venue" id="venue3"></div> </section>

this is the js code for the async getVenues():

const getVenues = async () => { const city = $input.val(); //url below is constructed from the inputs provided const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210628`; try{ const response = await fetch(urlToFetch); if(response.ok){ const jsonResponse = await response.json(); const venues = jsonResponse.response.groups[0].items.map(obj => obj.venue); console.log(venues) };//end if return venues; } catch(error){ console.log(error); } };//end get venues