Wanderlust Project - TypeError: venues is undefined

Hello, I keep getting this error [TypeError: venues is undefined] in the console, I’ve rewritten my code, reviewed every step and still I don’t know what I’m doing wrong…
Please help me! Thanks in advance :slight_smile:
Link to the project:
Wanderlust

Here’s my code:

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

// OpenWeather Info
const openWeatherKey = '';
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'];

// AJAX functions
const getVenues = async () => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180101`;

  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 () => {
  const urlToFetch = `${weatherUrl}?&q=${$input.val()}&APPID=${openWeatherKey}`;

  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse;
    }
  } catch (error) {
    console.log(error);
  }
};

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

const renderForecast = (day) => {
  const weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
};

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

$submit.click(executeSearch);
1 Like

I am getting the same error!

I think it has something to do with Step 16.

Explore the object in the console. There’s a lot of information in there. Let’s save some of that data to a variable called venues . Specifically, follow this nesting chain from the jsonResponse variable to get an array of venue data:

  • the response property (an object)
  • the groups property (an array)
  • the first element of groups
  • the items property (an array of venue data)

When you log the code provided in the hint, it throws an error “TypeError: Cannot read property ‘0’ of undefined”:

const venues = jsonResponse.response.groups[0].items;

This is super frustrating! I’m not sure why there isn’t a video guide attached like the other Codecademy projects.

I hope someone can help.

I am getting just the same!
I checked the source code so many times but it keeps on saying that its undefined.
I can see that its been a 5 months since you posted it.
Anyone managed to solve this??

I’m also getting the same thing. Hopefully someone can update this. It might work if you add this underneath throw new Error('Request failed!'); the if statement. I haven’t finished yet but that made the error go away for me.

const getVenues = async () => {
  const city = $input.val();
  const urlToFetch=`${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200417`;
  console.log(urlToFetch);
  try {
    const response = await fetch(urlToFetch);
    if(response.ok) {
      const jsonResponse = await response.json();
      const venues = jsonResponse.response.groups[0].items.map(parameter => parameter.valueToStore);
      return venues;
    }
  throw new Error('Request failed!');
  } catch(error){
    console.log(error);
  }
}

I had the same issue. In the renderVenues function I changed

const venue = venues[index];

to

const venue = venues[index].venue;

and

$destination.append(`<h2>${venues[0].location.city}</h2>`);

to

$destination.append(`<h2>${venues[0].venue.location.city}</h2>`);

and it populates some attractions on the page after a city is submitted.