Problem with wanderlust

Hy,
i have problem too:


// 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=20211218`;
console.log(urlToFetch);
try {
  const response = await fetch(urlToFetch, options);
  if (response.ok) {
    console.log(response);
    const jsonResponse = await response.json();
    console.log(jsonResponse);


  } else {
    throw new Error('Request Failed!');
   }


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

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)

the response in console:

the link of response is live:
https://api.foursquare.com/v2/venues/explore/?near=Boston&limit=10&client_id=2IH2UEP3FAAU1QDZA1DBCNF3XNKH2IFGLIX4ZMX4ID2JMESD&client_secret=SO3L1PMV45JSOF4IM1S3GHAZ0LOFCXYT0IB4CEDI0M34CR5W&v=20211218

what is the bug in my code?

It is amasing!
I did download the code of solution and find it:
With my Foursquare ID and secret code dont work it but with ID and Secretcode of solution does it.
why??? 3 hours disappeared and most of my nervs…

For easy fix just create api key at foursquare and copy it. Make new const named apiKey and change url to the v3 one. Then change some lines in your getVenues function and voila ur mostly done. Next thing is to fix render a little bit, by changing “city” to “locality” in main.js and helpers.js.

//main.js // Foursquare API Info const apiKey = 'YOUR-API-KEY'; const url = 'https://api.foursquare.com/v3/places/search'; const getVenues = async () => { const city = $input.val(); const options = {method: 'GET', headers: {Accept: 'application/json', Authorization: apiKey}}; const urlToFetch = `${url}?near=${city}&limit=10`; try { const response = await fetch(urlToFetch, options); if (response.ok) { const jsonResponse = await response.json(); console.log(jsonResponse); const venues = jsonResponse.results; console.log(venues); return venues; } } catch(error) { console.log(error); } } // Render functions const renderVenues = (venues) => { $venueDivs.forEach(($venue, index) => { // Add your code here: const venue = venues[index]; const venueIcon = venue.categories[0].icon; console.log(venueIcon); const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`; let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc); $venue.append(venueContent); }); $destination.append(`<h2>${venues[0].location.locality}</h2>`); } //helpers.js const createVenueHTML = (name, location, iconSource) => { return `<h2>${name}</h2> <img class="venueimage" src="${iconSource}"/> <h3>Address:</h3> <p>${location.address}</p> <p>${location.locality}</p> <p>${location.country}</p>`; }
3 Likes

Thank you! I will try it.

Hey ajax3793785171,

did you manage to make it work with your code? I have the same 410 issue, although when using the browserI can see the object properly.

thanks

Hello Stefanos, I haven’t had time to deal with the task yet. When I get back to it, I will share my experience with you.

best regards

Jozsef

Küldte a Windows Posta

Hi Jozsef, thank you for the reply.

I have already spent yesterday and a couple of hours today trying to troubleshoot this by trial and error. But didn’t manage to figure it out. I always get a response 410, which to my eyes seems like the endpoint is not there anymore. Clearly this is not the case. It is also well documented in the Foursquare API developer’s reference.

I don’t have much time either for this task, need to continue with the Node.js module. Maybe will get back at it in a later time. I will post any findings.

Regards,
Stefanos