Wanderlust Problem

Hello so I’m trying to do this project but it won’t fetch any data for me, the console log prints info but the html does not change.
Here is my code


// Foursquare API Info

const clientId = 'IFF1UQNHJJHJ0HDW2GYGVGHYVRQSRSRRJVIZLZRTFRY1EBOM';

const clientSecret = '35GQKWILUGSPULEZGYRZMBSEZFRFDSS4Z4LLZOCI2NJWG0N0';

const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info

const openWeatherKey = 'e74c4f3242890472f778ee815710c2a8';

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();

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) => {

  const weatherContent = createWeatherHTML(day);

  $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)

Hello, and welcome to the forums!

You mentioned the console log shows information but the HTML doesn’t change, so that is a big spot to start. Notice that you have renderForecast and renderVenues functions that you never ended up calling. Calling those at the right spot with the right data is what makes the changes to your HTML.

Some more hints / details if you need
  • Your getVenues and getForecast functions are both async and will return a promise
  • Right now you are only calling those functions and not chaining anything to them.

After you do take care of that, you’ll start seeing data for one of your APIs on the page. The other will still have trouble because of a bug in one of your functions that fetches the data. You can go back and do more logging and verifying to see where that issue is.

Hint for the 2nd issue
  • Your getVenues function returns undefined because you return venues without ever setting a value for it.

I hope this helps point you in the right direction

1 Like

Oh god, I just noticed my mistake. This is what I get for trying to do this project at 4 AM, it works now, thank you so much.

2 Likes