Wanderlust video not available? Intro to JS

I have arrived to the infamous step 13 in The Wanderlust project in Intro to JS. Many people are having a problem but I haven’t seen the same problem as I’ve got.

Also they seem to reference a video that doesn’t show up on my page? It seems there were a lot of complaints so maybe they took it down. I’d love a video walkthrough for this problem because frankly, none of this is clicking right now.

Below is what the console reads after I click submit. (Also no results pop up, regardless of city).

Uncaught (in promise) ReferenceError: clientID is not defined
at getVenues (main.js:23)
at HTMLButtonElement.executeSearch (main.js:65)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

Below is my code, which is up to step 13:

// Foursquare API Info
const clientId = 'that's a secret :slight_smile: ;
const clientSecret = 'another secret';
const url = 'https://api.foursquare.com/v2/venues/VENUE_ID?near=';


// OpenWeather Info
const openWeatherKey = 'uh uh uh';
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=20200510`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      console.log(jsonResponse);
    }
    const venues = jsonResponse.response.groups[0].items;
  }
  catch (error) {
    console.log(error)
  }
}

const getForecast = () => {

}


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:

    let venueContent = '';
    $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()
  getForecast()
  return false;
}

$submit.click(executeSearch)

The error is telling you where and what your problem is. Go to your getVenues function and look at clientID in urlToFetch. Are you doing string interpolation correctly? Also you want to keep your api keys to yourself and not post them publicly.

2 Likes

I have completed the project, however my Weather isn’t rendering. In the console, it is saying input is not defined.

main.js:38 Uncaught (in promise) ReferenceError: input is not defined

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 {
    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();
  console.log(jsonResponse);
  return jsonResponse;
    }
  }
  catch (error) {
    console.log(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);
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
	let weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
}

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

$submit.click(executeSearch)

Heya,
I had the opposite problem my locations weren’t rendering. Now I’ve got it all working thanks to you sharing your code. Here’s my code - hope it helps!


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

// OpenWeather Info
const openWeatherKey = ‘82fbd76530670eb0d1e753af42912e76’;
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 {
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.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(

${venues[0].location.city}

`);
}

const renderForecast = (day) => {
let 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 can’t believe it. That missing dollar sign in the Weather Url inside the {}. I thought I had tried that! Thanks for the help!

About the video, in this thread user simeon94 posted a link to the video. Which can be found here.

1 Like

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