Need help with Wanderlust project (the venues won't load)

Hello, I was working on the Wanderlust project and when I got to step 32, the venues wouldn’t load.
I watched the video, and even reported a bug.

Here is the link and code:

https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

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

// OpenWeather Info
const openWeatherKey = 'fce62f2d646192f67764353f75b10975';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDiv = $("#weather1");
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=20210122`;
try {
  const response = await fetch(urlToFetch);
 if (response.ok) {
   console.log(response)
   const jsonResponse = await response.json();
console.log(jsonResponse);
const venues = jsonResponse.response.groups[0].items.map(item => item.venue);;
console.log(venues)
return venues;
 }
} catch (error) {
 console.log(error)
 }
}


const getForecast = async () => {
  const urlToFetch = `${weatherUrl}${openWeatherKey}&q=${$input.val()}&days=4&hour=11`;
  try {
  const response = await fetch(urlToFetch);
   if (response.ok) {
  const jsonResponse = await response.json(); 
  console.log(jsonResponse)
  const days = jsonResponse.forecast.forecastDay;
  return jsonResponse;
  return days;
   } else {
     throw new Error('Code malfunction!')
   }
} catch (error) {
    console.log(error.message);
  }
 
}

// 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 = (day) => {
  // Add your code here:
  
	let weatherContent = '';
  $weatherDiv.append(weatherContent);
}

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

$submit.click(executeSearch)

I have exacly the same problem. the venur variable inside the renderVenues() when logged to the console comes back as undefined so venueIcon gives me a bug. Where did you see the video?

I found the video on a topic.

If you need it, here is the link:

1 Like

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