Wanderlust 400 HTTP error (steps 13-14)

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 :see_no_evil:)

1 Like

Hi there.

I think the error is because of a typo… :slight_smile:

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. :slight_smile:

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

1 Like

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 :joy: 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 :smile: so thanks again!

1 Like

No problem! Typos happen to everyone. :smiley:

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

1 Like

Thank you for this post chain everyone. It wasn’t the error I had but it was very similar. In my head I was completely right with my urlToFetch but my brain accidently put the $input variable because that is where city was coming from. It was quite funny when I realized I put that instead of the city value which we were caching already. So My api call was sending an object. Was good times.

Can someone help me with this? I’m ready to give up. The video which I had to search for that goes along with this project was no help as I did everything he did and get the same thing. I’m stuck on step 13 and 14 of this project. Here is what I am getting in my window console.

        Response {type: "cors", url: "https://api.foursquare.com/v2/venues/explore?near=…LPXPT5XPGZANVPPF5ANGWNFGKDIN0TVA4I0LBL&v=20210908", redirected: false, status: 200, ok: true, …}

and if I put the url into my browser tab and hit enter here is the JSON response I get back.

{“meta”:{“code”:400,“errorType”:“param_error”,“errorDetail”:“Must provide parameters (ll and radius) or (sw and ne) or (near and radius) or (nearVenueId and ll) or (superVenueId) or (polygon)”,“requestId”:“61393e8acb2e670bcf516c6a”},“notifications”:[{“type”:“notificationTray”,“item”:{“unreadCount”:0}}],“response”:{}}

Here is my relevant code up to this point

‘’’
/ 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();
const urlToFetch = ${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210908;
try{
const response = await fetch(urlToFetch);
//const jsonResponse = await response.json();

if(response.ok){
 console.log(response);

}

} catch(error){
console.log(error);

}

}
‘’’

I put question marks for my keys here because I didn’t want to broadcast those. I checked them twice in the code I am actually running however and the ones I entered are correct. As is everything else as far as I can tell.

not sure why it doesn’t show the indentations when I cut and pasted but those are in place and correct because I am not getting any indentation errors.

BTW the function $("").val() is a jquery function. The vanilla javascript would be document.getElementById("").value which is a getter function that doesnt use a parameter list invokation syntax so I see why you wouldnt expect to have to add the parameter list since we havent been introduced to jQuery yet. Also IMPORTANTLY: never post your api keys. Not anywhere, including github or any forum. Now that you have, I could potentially use your api keys and not even need to generate my own and the apis you’re using have a limited number of requests you can place so I could use up your requests.

Every query string starts with a ? character before any of the arguments – the property value pairs. You’re missing that in your url string. Should be const url = "https://api.openweathermap.org/data/2.5/weather?" (around line 7 in your code.)

1 Like

Thanks however did you actually read my post? My API keys are not ??? not sure how you are going to get anything with that.

Also the const city = $input.val(); line points to a user input earlier in the code. The user enters the city name in the text box and that value gets entered there. How am I supposed to add the var parameters then? After I read this I tried const city = $input.val(’#city’); but then I get

GET https://api.foursquare.com/v2/venues/explore?near=[object%20Object]&limit=10&client_id=ZOFRUGU41SRCXMN3IQP1GGTLQ2RMC5URYLAR2BOOHL5XXFV1&client_secret=CNQV150QLZLPXPT5XPGZANVPPF5ANGWNFGKDIN0TVA4I0LBL&v=20210908 400

The guy in the video did the same thing I did which is exactly as the instructions described. Also the instructions explicitly tell you to enter 'https://api.openweathermap.org/data/2.5/weather and not weather? however changing this also made no difference probably because the code that is failing isn’t even drawing anything from openweathermap.org yet.

are you missing around the whole urlToFetch string? I don’t know that things wrapped in `` will concatenate like a normal string ie is lo + ${object} == 'lo ${object}? Try putting the whole urlToString expression in `.
EDIT: I was not talking to you about the .val() jQuery function. I was responding to razorfrost.

Yeah the back ticks take care of this. This is a string $[var} with back ticks == 'This is a string ’ + var without backticks. Although backticks and normal single quotes look almost the same.

update: The problem has been fixed. If you look at the link that the console provides you will see a small arrow beside it. Click that arrow and you will see a json type object with different key: value pairs. There is a key value pair called url: where the following value is the actual link that you are looking for.