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 
)
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.
so thanks again!