Intermediate JavaScript, Wanderlust Project, Steps 10-13 (fetching JSON response)

[bitsofprocess]

Welcome to the Get Help category!

This is where you can ask questions about your code. Some important things to remember when posting in this category

• Learn how to ask a good question and get a good answer!
• Remember to include a link to the exercise you need help with!
• If someone answers your question, please mark their response as a solution
• Once you understand a new concept, come back and try to help someone else!

I’m working on the Wanderlust project in which you use Async JavaScript and make HTTP requests using AJAX. I’ve been getting stuck on these steps-- I managed to find some errors but still continue to get errors and don’t get the responses logged to the console.

In the console, I’m receiving the 'Failed to load resource: 400" error. I’ve gone through my code multiple times, tried several different things out, reviewed the documentation, compared my code to the documentation and hints and cannot figure out why it isn’t working. I checked discord and the message boards and it looks like there were some changes recently on FourSquare’s end, so I’m not sure if that’s what the issue might be. I’ve included the relevant code below.

The error messages also indicated that there’s an unexpected token ("(") on line and (‘Get’ [foursquare url] 400" on line 34.

Thanks in advance for any help!

// Foursquare API Info const foursquareKey = 'XXXXX'; const url = 'https://api.foursquare.com/v3/places/search?near='; // OpenWeather Info const openWeatherKey = 'XXXXX'; 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 $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")]; const $weatherDiv = $("#weather1"); const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const options = { method: 'GET', headers: { Accept: 'application/json', Authorization: foursquareKey } }; // Add AJAX functions here: const getPlaces = async () => { const city = $input.val(); const urlToFetch = `${url}${city}limit=10`; try { const urlToFetch = await fetch(url, options); if (response.ok){ const jsonResponse = await response.json(); console.log(jsonResponse); } } catch(error) { console.log(error); } };

[bitsofprocess]

Ack! I just realized that I messed up a bunch of the variables when I was messing around with it. Have fixed it now, but am now getting a message saying that there’s an error on line 1 (Unchecked runtime: message port closed before a response was received). I checked StackOverflow and it was suggested to turn off my ad-blocker, which I did, but that didn’t seem to help.