Wanderlust Project


I am working on the Wanderlust project using foursquare and OpenWeatherMap. Currently running into an issue causing a failed API fetch.
I am quite confused why I am getting a typeError on categories
I peeked at the hint and it looks like I should have no issues but it is saying categories is undefined.
I honestly am a little confused where categories should be defined since it isnt in any of the files, is it fetched from the API?

Here is the error I am receiving in my console.

main.js:58 Uncaught TypeError: Cannot read properties of undefined (reading 'categories')
    at main.js:58
    at Array.forEach (<anonymous>)
    at renderVenues (main.js:55)
    at HTMLButtonElement.executeSearch (main.js:80)
    at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

Instructions from codecademy:

Step 28: Create a venueIcon const to save the value of the object representing the venue icon. This is accessible as the icon property of the first element in the array of categories of the venue object.

here is my code:

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

// OpenWeather Info
const openWeatherKey = '7719fad76c911e8c86907b0a898747ff';
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=20180101`
try {
 response = await fetch(urlToFetch)
 if (response.ok) {
    const jsonResponse = await response.json();
    const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
    return venues;
catch(error) {

const getForecast = async () => {
  try {
    const urlToFetch = `${weatherUrl}?&q=${$input.val()}&APPID=${openWeatherKey}`
   const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json()
      return jsonResponse
  catch(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);

const renderForecast = (day) => {
	let weatherContent = '';

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


There is an index.html, etc. in the exercise but the code I am working on is above.
The line in causng the error, main.js:58 is below:
const venueIcon = venue.categories[0].icon;

Are you sure you have the correct API Token? Because indeed the venue object from Foursquare has a response field called categories which is a

An array, possibly empty, of categories that have been applied to this venue. One of the categories will have a primary field indicating that it is the primary category for the venue. For the complete category tree, see categories.