Wanderlust not rendering venues

The information from the foursqaure API isnt being rendered to the page, I looked and checked if I was missing something and even went through the video but it seems as though everything is correct. Any help is appreciated.

// Foursquare API Info
// Foursquare API Info
const clientId = 'QOM3U3DJFRYY11AYOECAFM5ZPERGCZKOVSN5HXXQOJKDR0LQ';
const clientSecret = 'DRMXHFV3N5Z15IKF3IYUO1DCBLGSP3SOBEFSYLKEE30K5NOB';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// APIXU Info
const apiKey = '75efa2a4b30341af8ac151748181812';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
const getVenues = async () => {
	const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20181219`;
  try {
    const response = await fetch(urlToFetch);
    	if (response.ok) {
        	const jsonResponse = await response.json();
        	const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
        	console.log(venues);
        	return venues;
  	}
  } 
  catch(error) {
    console.log(error);
  }
}

const getForecast = async () => {
 	try {
    const urlToFetch = `${forecastUrl}${apiKey}&q=${$input.val()}&days=4&hour=11`;
  const response = await fetch(urlToFetch);
    if (response.ok) {
        const jsonResponse = await response.json();
      	const days = jsonResponse.forecast.forecastday;
      	console.log(days);
      	return days;
        } 
  } 
  catch(error) {
    console.log(error);
  }
}


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:
		const venue = venues[index];
    const venueIcon = venue.categories[0].icon;
    const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
  });
    let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);
    $venue.append(venueContent);
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (days) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:


    let weatherContent = '';
    $day.append(weatherContent);
  });
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDivs.forEach(day => day.empty());
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues().then(venues => renderVenues(venues));
  getForecast()
  return false;
}

$submit.click(executeSearch)

1 Like

Anyone ? Iā€™m still stuck any help is better than no help guys :confused:

Not sure if it was already resolved or not (hope it was), but you somehow managed to close the block of code earlier than needed here:

    const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`;
  });
    let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);
    $venue.append(venueContent);
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}