Wanderlust

Hi everyone,

I’m currently stuck with the ‘Foursquare’ task. The devTool throws an error when i run it, it says on line 25(const response = await fetch(…) ) it throws this error:
GET https://1c3e73f1bb51424d98ade7f34ec01e44.cc-propeller.cloud/GET%20https://api.foursquare.com/v2/venues/explore?near=?near=paris&limit=10&client_id= …&client_secret=…&v=20210327;Preformatted%20text 400
getVenues @ main.js:25
executeSearch @ main.js:76
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

Can someone show me, where i did the mistake and how to change it.

// Foursquare API Info
const clientId = ‘’;
const clientSecret = ‘’;
const url = ‘GET 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}?near={city}&limit=10&client_id={clientId}&client_secret=${clientSecret}&v=20210327;Preformatted text`;

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.map(item => item.venue);
console.log(venues);
return venues;
}

throw new Error(‘Request failed!’);
}
catch (error) {
console.log(error);
}
};

const getForecast = async () => {
const urlToFetch = ${weatherUrl}?&q=${$input.val()}&APPID=${openWeatherKey};
try {

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

// 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}`);
}

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)

Hello,

One issue is the URL you’re using for the Foursquare API. Compare these two from your code:

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

// OpenWeather Info
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

Notice there’s something extra in the Fouresquare API URL that is making it invalid. The hint for Step #3 will tell you what it needs to be if you aren’t sure.

Does it mean, i should remove the “?near=” in foursquare and only add it if i need it?

aahh you mean the GET request.

its still throws an error.

Yes, but it will be a different error now. You can continue debugging.

1 Like

Thanks for the help i found the ‘mistake’, it was in the fetch method i added preformated text and that s why it throws an error.

1 Like

yes it was a different errow. now i can finally move on, thanks a lot.