Wanderlust step24

I am having a problem in step 24 of this project. When I log jsonResponse to the console I get no response in the Chrome Javascript console. Can you help, please? My code, with the secret etc removed is the following:

// Foursquare API Info

const clientId = ‘’;

const clientSecret = ‘’;

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

// OpenWeather Info

const openWeatherKey = ‘’;

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() // $input.value is what the user inputs

const urlToFetch=${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200603;

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

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

    }  

} catch(error){

  console.log(error);

}

};

// Render functions

const renderVenues = (venues) => {

$venueDivs.forEach(($venue, index) => {

// Add your code here:

let venueContent = '';

$venue.append(venueContent);

});

destination.append(`<h2>{venues[0].location.city}`);

}

const renderForecast = (day) => {

// Add your code here:

let weatherContent = ‘’;

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

Hey, @methodmaster29606.

If you would review How do I format code in my posts?, and edit your post, it will be much easier for someone to help you.

1 Like

Sorry about that. I’ll try again. When I get to step 24, I get no response from the JavaScript console in Chrome. My code is the following:

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

// OpenWeather Info
const openWeatherKey = '';
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() // $input.value is what the user inputs
  const urlToFetch=`${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200603`;
  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 = () => {
    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);
        }  
    } catch(error){
      console.log(error);
    }
};


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:

    let venueContent = '';
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
  
	let weatherContent = '';
  $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)

Your getForecast;

const getForecast = () => {

Has no opening async and so the await parts wont do anything in the rest of that function.

Your getVenues does.

const getVenues = async () => {

Thank you very much.