Codecademy Forums

Wanderlust (venue info. is not displayed)

I am on the step 33rd of the ‘wanderlust’ project. It says at the end, information of the venue entered in the search field will be displayed after completing the step, but it didn’t. I have copied the error shown in the Google Deveoper’s Console below -

Link to the project - https://www.codecademy.com/paths/web-development/tracks/webdev-intermediate-javascript/modules/intermediate-javascript-requests/projects/wanderlust

Uncaught (in promise) TypeError: Cannot read property ‘0’ of undefined
at main.js:55
at Array.forEach ()
at renderVenues (main.js:54)
at main.js:78

But I can’t understand what’s wrong with the code. My JavaScript file is given below -
Main.js -

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

// APIXU Info
const apiKey = '';
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=20190814';
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      console.log(response);
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      
    }
  } catch(error) {
    console.log(error);
  }
}

const getForecast = async () => {
  const urlToFetch = forecastUrl + apiKey + '&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 days;
    }
  } 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}`;
    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)

Please help !

Hey @arleenjuneja,

Regardless of the solution to your problem, which I cannot look into atm, please remove your personal api keys. They are yours, and yours only.

:wink:

1 Like

@mtf any chance you can remove any trace of his personal API keys in the edit history?

Your getVenues function is incomplete. You haven’t returned any venues, so in this line:
const venue = venues[index]; venues is ‘undefined’.
Steps 16 through 18 cover what is missing.

3 Likes

Thanks for bringing that up. It would appear the member picked up on your message and edited their post.

3 Likes

How can I see the edit history of this post ? If I can’t, then someone please help me in removing the API keys.

Thanks for your help. The code worked.

1 Like

You are welcome. To see the edit history, in the upper right-hand corner of your post is a small orange-ish pencil with a number 2 just to its left. This indicates that you have edited you post 2 times. If you click on the pencil, you’ll see your edit history.

Is it possible to remove the API keys from it ?

No. I don’t think anyone short of a moderator can remove the keys. I’m not sure if a moderator can, but I’ll tag a few, and we’ll see. @mtf @ionatan @alexcraig @factoradic @jibblyj

1 Like

like that? if they’re in any way valuable then that’s still bad but if not-so-much then they’re no longer public and it’s fine >.>

3 Likes

Thanks! That ought to do it. @arleenjuneja

Thanks @midlindner and @ionatan.

1 Like