Wanderlust 400 HTTP error (steps 13-14)

[amelie.gorry.am53166]

Hi!

As many seem to have been, I’m now also stuck at step 13-14 of the Wanderlust project. I’ve been reading all topics about other users getting the same (infamous) 400 HTTP error, but for the life of me I can’t figure out what is wrong with my code. I see that in most cases a typo was the culprit (which would explain that error) so I went over it again and again… to no avail.

The error as it appears in the console:

And if I paste the URL above from the console to my browser:

{"meta":{"code":400,"errorType":"failed_geocode","errorDetail":"Couldn't geocode param near: function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType","requestId":"5f4e5b590c8de740f7cf8031"},"response":{}}

And last but not least, my code:

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

// OpenWeather Info
const openWeatherKey = 'a0f5649664de61ad7c59a6ecccd822cb';
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=20200901`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      console.log(response);
    }
  } 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 = (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)

Could someone point me in the right direction?
(If it is a typo, then I apologise profusely in advance, I did the best I could to comb my code )

[thepitycoder]

Hi there.

I think the error is because of a typo…

The error you’re getting back is telling you the issue:

"errorType":"failed_geocode","errorDetail":"Couldn't geocode param near

The Foursquare API documentation mentions that if it can’t understand the value you provide for the near parameter, i.e. it can’t work out the geographical area you’re interested in, then the API will return a 400 failed_geocode error. This is what is happening in your case.

The reason that you’re getting the error is because $input.val is a function, so your code at the moment is submitting the function object as a geographical area and Foursquare doesn’t understand.

You need to change this line:
const city = $input.val;
to this:
const city = $input.val();

Should work OK then.

(Also, don’t kick yourself too hard over this - this syntax isn’t actually explained anywhere prior, so you wouldn’t know about it…)

[amelie.gorry.am53166]

Thank you very very much for the thorough explanation! Dang, typo’s are 90% of the reasons why I get stuck in average, I should know better though I do think after 1+ hour of searching for the typo it kind of becomes invisible to the eye… Maybe I should take a break before giving it another look next time.

Anyhoo, it works perfectly now! I then got another authentication error when trying to paste the URL but thanks to one of your other posts I was able to overcome that one too so thanks again!

[thepitycoder]

No problem! Typos happen to everyone.

If you get stuck with anything else, let us know.