Wander LOST

Hi Guys.

I almost have the Wanderlust project finished, but i can not get the weather :

i can see this error into the console .

Uncaught (in promise) TypeError: Cannot read property 'main' of undefined
    at createWeatherHTML (helpers.js:13)
    at renderForecast (main.js:72)
    at main.js:82
// Foursquare API Info
const clientId = 'WVBM5HERXQP43AQXGXV1ETSYZMOOFPZW0DOOGZDWXQAQOQNP';
const clientSecret = 'IT5QCV44MBYA5OJZE0YALRYJWRKN2CFCLNOXITTABKMBDKMN';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = 'e5c3ac12682bd33e108ccc82246f34ad';
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=20200422`;
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 jsonReponse;
}
  }
  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);
$venue.append(venueContent);
    $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 => renderVenues(venues));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)
1 Like

ok , i’ve found out.

it was the “return jsonReponse” Typo…

Thanks anyway :slight_smile:

1 Like

Does somebody Know why do i get duplicate info into each venue ?

Sorry Guys,

Can Somebody point me whats wrong with the code ?,

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

// OpenWeather Info
const openWeatherKey = 'e5c3ac12682bd33e108ccc82246f34ad';
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=20200422`;
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) {

  }

}


// 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);
    $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 => renderVenues(venues));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)

If something is appearing twice, it must be added twice. Where in your code do you add that information?

1 Like

Found it ¡ , Thanks ¡

1 Like