Wanderlust: Request Failed! error

I need help with step 13 of the Wanderlust project.
wanderlust

when I check the console after entering a city I get an error. It looks like my status property is out of range and I don’t know how to go about getting it in range.

main.js:25 GET https://api.foursquare.com/v2/venues/explore?near=columbus&limit=10&client_id=YVFOGWN04SFRCET0N2FZONCP3RSFCVWXOBDKRVDRCLCG2CJP&client_Secret=NHGZLYZFSCF0QAS3BHWXN4X52IDCFGPUGH1XSFEB1DWYGEYS&v=20190323 400
getVenues @ main.js:25
executeSearch @ main.js:73
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3
main.js:38 Error: Request failed!
    at getVenues (main.js:35)

I rechecked my URLs and API keys and they all are correct. I don’t understand why my requests are failing or why the requests are possibly out of range.

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

// APIXU Info
const apiKey = '251c22f4d6c449d2ab5173715191503';
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key=';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
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=20190323`;
  try{
    const response = await fetch(urlToFetch);
    if(response.ok){
      console.log(response);
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      const venues = jsonResponse.response.groups[0].items;
      console.log(venues);
      
    }
    else {
      throw new Error('Request failed!');
    }
  }catch(error){
    console.log(error);
  }
}

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 = (days) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:


    let weatherContent = '';
    $day.append(weatherContent);
  });
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDivs.forEach(day => day.empty());
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues()
  getForecast()
  return false;
}

$submit.click(executeSearch)

1 Like

You have an upper case ‘S’ in client_Secret. It should be lower case: client_secret.
Easy to miss. Good luck! :grinning:

1 Like

Thank you, It worked perfectly!

2 Likes