Wanderlust Project Error Message


#1

Hello together,

I’m currently taking my final steps to complete the JavaScript Class.
I’m working on the Wanderlust project and I always get an error message I can’t get rid of.
My main.js code looks as follows

// Foursquare API Info
const clientId = 'JXX4V5OB52QQR150TWMIRCLURAVTGDBPIYSWAMH0SMX4U4NL';
const clientSecret = 'RYRCKNT5PWH03ZY0PDM2ADF2PFU3OLBEE544MJ0B5JKTN1ZV';
const url = '_It doesn't let me post this link_';

// APIXU Info
const apiKey = 'c1a2b6e75aa148ccb1581251181508';
const forecastUrl = '_It doesn't let me post this link_';

// 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=20180815`
  try {
  const response = await fetch(urlToFetch);
  if(response.ok) {
      const jsonResponse = await response.json();
    console.log(jsonResponse);
    const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
    console.log(venues);
  }
  else {
      throw new Error('Request failed!');
  }
    return venues;
} catch (error) {
  console.log(error.message);
}}

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();
      const days = jsonResponse.forecast.forecastday;
      console.log(days);
      return days;
    }
    else {
      throw new Error('Request failed!');
    }  
} 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)

When I type something into the input field and then executeSearch(), I do get results, but I also get
Uncaught (in promise) TypeError: Cannot read property ‘categories’ of undefined
at $venueDivs.forEach (main.js:60)
at Array.forEach ()
at renderVenues (main.js:58)
at getVenues.then.venues (main.js:83)
$venueDivs.forEach @ main.js:60
renderVenues @ main.js:58
getVenues.then.venues @ main.js:83
Promise.then (async)
executeSearch @ main.js:83
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

Can anyone help me how to solve that issue?

Thanks in advance!


#2
// 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>);
}

#3

Wanderlust

I’m kind of leary of declaring a constant in a loop, but that may not be the problem.

We can’t see the backticks but assume they are there. If you use three backticks at start and end of block (on their own lines, respectively) all formatting is preserved, including template string expressions…


As for my concern earlier about constants, it just dawned on me that each iteration of the loop is a new call to the function so all the constants are new, and not preserved from previous iterations. Correction-blindness always leans to bias, and I just got caught in its web. (blush)