Wanderlust Step 32 Errors!

Get Help JavaScript
#1

Trying to complete step 32 on the Wanderlust project but keep getting ‘cannot read property ‘0’ of undefined’ for the forEach method lines in the renderVenues function.

I logged the venue variable to the console and it’s responding with an object that’s the actual HTML div, whereas the function looks like it’s trying to target the json response from the API. Therefore the given parameters don’t exist on the object. Any idea on how to fix this?

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);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}
#2

I’m not completely aware of this project (please post a link to the LE page) but something immediately jumps out… $venueDivs. Where does that fit in?

#3

It’s the variable for the divs in the HTML. I’m sorry, I’m not sure what the “LE page” is but below my full code so far for both JS and HTML (with client IDs and secrets omitted)

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=20201123`


try {
  const response = await fetch(urlToFetch)
  if (response.ok) {
  const jsonResponse = await response.json()
  const venues = jsonResponse.response.venues.map(venue => {
  return venue.name
   })
    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}`;
    let venueContent = createVenueHTML(venue.name, venue.location);
    $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)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Wanderlust</title>
    <link rel="stylesheet" type="text/css" href="public/reset.css" />
    <link rel="stylesheet" type="text/css" href="public/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Work+Sans" rel="stylesheet">
  </head>
  <body>
    <header>
      <img class="logo" src="https://content.codecademy.com/courses/intermediate-javascript-requests/wanderlust/logo.svg" alt="logo" />
    </header>
    <main>
      <h1>Where do you want to land?</h1>
      <form autocomplete="off">
        <input type="text" id="city">
        <button id="button" type="submit">Submit</button>
      </form>
    </main>
    <div class="container">
    <div id="destination">

    </div>
    <div class="sectiontitle">
      <h2>CURRENT WEATHER</h2>
    </div>
    <section id="weather">

        <div class="weather" id="weather1">

        </div>

    </section>
    <div class="sectiontitle">
      <h2>TOP ATTRACTIONS</h2>
    </div>
    <section id="venues">
      <div class="venue" id="venue1">

      </div>
      <div class="venue" id="venue2">

      </div>
      <div class="venue" id="venue3">

      </div>
    </section>
    <footer>
    </footer>

  </div>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="public/helpers.js"></script>
    <script src="public/main.js"></script>
  </body>
</html>
#4

The Learning Environment landing page for this project. Please post the URL, with any luck my code from some years ago is still there.

#5

Try logging the value of jsonResponse before you process it. In the version of the APIs I used, jsonResponse.response.venues wouldn’t get me to an array of data to process.

image

Unless they released another version of the APIs and/or you’re using a different endpoint, then you may need to review this section of the code.

Your code snippets don’t show the URL you’re using because it’s probably in the section of secret keys, but this is the one I used to generate the jsonResponse above: https://api.foursquare.com/v2/venues/explore?near=