Wanderlust Project - Weather Issue

Hello,

I’m currently doing the wanderlust project and my code is not allowing me to fetch the weather.

Can someone please try and tell me what it is i’m doing wrong.

Please see below for my code:

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

// OpenWeather Info
const openWeatherKey = 'c46dc9d20562e112025eff78720a3d8a';
const weatherUrl = 'http://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=20210223`; 

try { 
 const response = await fetch(urlToFetch);
 if (response.ok) { 
   console.log(response);
   const jsonResponse = await response.json();
   console.log(jsonResponse); 
   const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
   console.log(venues); 
   return venues;
   }
  else { 
   throw new Error('Response failed!');
 }
} 
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 => renderVenues(venues));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch) 

Thank you in advance for any help or assistance with this.

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