Wanderlust Step 32 (venue info not rendering)

Hi there,

I can’t seem to get my venue information to render. Not sure where I’ve gone wrong, but I can’t get any output on the mock-up Wanderlust page. This is step 32 of the challenge.

Here’s a link to my code: https://gist.github.com/9755ec308c831fdf37440c6d2de655e5

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

// OpenWeather Info
const openWeatherKey = 'c80ad7cdb604e86641f38849bbbf4040';
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=20200925`; 
  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>`);
}

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().then(venues=> renderVenues(venues));
  }
  getForecast()
  return false;
}

$submit.click(executeSearch)

If you open up the console in your browser after loading index.html before performing a search, you’ll see an error that will greatly help with your debugging:

image

This points to line 85, which is one of your lines in the executeSearch function

1 Like

Yes, I see that. I changed the code accordingly (weird since it was code that codecademy provided).

Now I’m getting a ‘400 Bad Request’ error that points to line 41 where I have my await fetch(urlToFetch):

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


}

Can’t figure out why it’s a bad request…

I took the original code you provided in the first post, fixed the error we previously discussed, and then put the new version of the getForecast function you provided in your reply. It’s actually working for me as far as being able to retrieve the data from the API.

image

was the output with

getForecast().then(test => console.log(test));

I do know that the OpenWeather API can be picky for the queries though. Be sure to use a ZIP code or a city that you know 100% works. For example, searching for New York, New York works fine, but searching for New York, NY returns a 404 error, which our code isn’t prepared to handle.

I did extra testing to try to replicate the 400 bad request error. The only ways I could make it happen were to either 1) click Submit without anything in the search box, or 2) call getForecast outside of the executeSearch function.
.