Wanderlust project - not displaying weather

Howdy, I am about to complete the JS introductory course and I am encountering a problem while working on the wanderlust project.

Here is the link.

// Foursquare API Info
const clientId = 'removed prior to posting it';
const clientSecret = 'removed prior to posting it';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '2ccbdc7450cb0d75a3d8ed497017467f';
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) {
      //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;
    }
  }
  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, 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)

This is the error I am getting:

Can anyone please help me understand what’s the problem?

Have you read the error?

You’re getting an HTTP 404, or “Not Found” error, back from the OpenWeather API.

Perhaps you should check that you’re attempting to access a valid URI? :slight_smile:

1 Like

The problem seemed to be line 40, urlToFetch. I was pretty sure I had all of them double checked, but… Oh well!

Thanks a lot for the heads up @thepitycoder!

P.S. Any ideas why the console showed a second error apparently unrelated to the 404 error (even though all the rest seemed to be in order) and it disappeared as I got the url right?

From looking at it, my guess would be that something further along in your code was attempting to reference a variable which only got initialised/set after a successful call to the API.

If the API call failed and that variable failed to be initialised, you’d get the “Can’t read property of undefined” error. When the API bit was fixed, that error also goes away. :slight_smile: