Http requests: WanderLust

Hi i am having trouble with the wanderlust project for http requests lessons. i seem to be doing the project correctly but the search bar is not responding. i am on step 22 but i think it would be best if my whole code is looked at. something doesn’t seem right but i can’t put my finger on it. I have worked on it up til execute search() and getForecasts(). https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

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

// OpenWeather Info
const openWeatherKey = 'FAKES_STUFF';
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 = `${'https://api.foursquare.com/v2/venues/explore?near=?'}${city}&limit=10&client_id=${'L0PHNDERB15FOJMNJSZGXEAXKZHRBNRP54VXHPMI1AQY10NQ'}&client_secret=${'UZHGP0FBMNIMAJ5S3DQGXF3GF4KWPELN2B3L03PLUI1DGWEN'}&v=20210710`
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
    const jsonResponse = await response.json();
    console.log(jsonResponse)
    } catch(error) {
    console.log(error);
    }
    const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
  console.log(venues);
    return venues;
} 


const getForecast = () => {

}
  
  
  


// 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()
  const getForecast = async () => {
    const urlToFetch = `${weatherURL}?&q=${$input.val()}&APPID=${'9d7e4ee9cc5c0d970dd53f73aa379082'}`;
    try {
      const response = await fetch(urlToFetch);
      if (response.ok) {
        const jsonResponse = await response.json();
      }
    } catch (error) {
      console.log(error);
    }
  }
  console.log(jsonResponse)
  return false;
}

$submit.click(executeSearch)

Have you got any error messages, or done any tracing/debugging to determine which parts of your program are running versus stopping?

Few things that might be an issue (just comparing your code to mine - I haven’t worked on this recently):

  1. Double check your foursquare api url. It is slightly different to mine.
  2. As you have saved your api info to variables, you should now use these variables in your urlToFetch address.
  3. (By the way, best not to share your API info publicly like this - edit and delete out the details in your post)
  4. When you define getVenues, in the asynchronous request, reconsider at which point or order the try/catch(error) is meant to go. What is the purpose of this? For it to work, where should its components go? What impact does the placement have on the other code around (and in) it (and vice versa).
  5. In executeSearch… is something missing from getVenues() ?
  6. In executeSearch… why are you defining getForecast within executeSearch, rather than further up under the other AJAX function where it is currently defined as an empty block?

Hope this helps :slight_smile:

thanks for the help but it won’t let me edit the original posting. i don’t know why. i flagged the posting. hopefully that should work.

Hey! I edited your post so your keys will just have FAKES_STUFF in them. Hope that helps!

1 Like

thank you. but to be on the safe side i generated new ones too while deleting the old ones. after all it only takes a second for security breaches.