Wanderlust project, not showing Foursquare data

Hi!
I have been trying to finish the wanderlust project, but still don’t get Attractions from Fourssquare API. The weather info is submitted ok. Can someone please check this out and tell me where is the mistake? :slight_smile:

Code:

const clientId = 'redacted';
const clientSecret = 'redacted';
const url = 'https://api.foursquare.com/v2/venues/search??near=';

// OpenWeather Info
const openWeatherKey = 'redacted';
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=20200517`;
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);
    
    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) => {
    // 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>`);
}

  // Add your code here:
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().then(venues => renderVenues(venues));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)

Edited to remove API secrets and format code correctly.

I would STRONGLY suggest that you edit your post and obscure your app’s client ID and secret as these are your app credentials with FourSquare and you don’t want unknowns to use them pretending to be you

1 Like

I have removed the API secrets and correctly formatted the code. :slight_smile:

@kimmoh - you have an error in your const url variable. :slight_smile: