Wanderlust foursquare api

In the project wanderlust the foursquare api is not working and gives a 410 error when get requests are made. Also when I go to the site manually it says on venues 404 not found.

Is there a fix?

1 Like

I have the same problem. I found this on Foursquare’s site:

If you added Foursquare after 11/18/21, you automatically have access to the new version (v3) of the API. Please refer to our Places API documentation to ensure you’re viewing the correct information to successfully implement Foursquare technology!

For those who are already using the current (v2) version of the API, you may continue to do so or elect to upgrade now. Please contact Foursquare Developer Support for more information.

If I understand this correctly, they have, just a few days ago, implemented a new API version that all new accounts are bound to, which means we cannot use the old version. This means that the url in codecademy’s project doesn’t work for us. I guess it might be possible for us to check the documentation for the new version and complete the project with that information, but right now I have not the time to try that. In either case, Codecademy needs to update the project.

Are you making the same interpretation as me?

Here’s the link where I found this information if you want to check it and move on from there to the new API version:

Yeah Codecademy needs to update the project. Also when clicking on the endpoints in the link you send, it returns a 404 not found error unfortunately

I’ve now tried using the new version, the Places API, but when I try to fetch I get blocked by CORS policy. So that’s a dead end for me. I hope Codecademy can help us

Hi there,

I’m also having issues with calling Foursquare’s API.

This is what I found so far:

  1. The version changed.

The foursquare api V2 has been deprecated for new projects.

On V3, the new version, the authentication is handled via an Authorization Header.

  1. The url also changed.
    const url = ‘https://api.foursquare.com/v3/places/search?near=’;

  2. The cors error
    With mode: ‘no-cors’ I managed to pass the CORS policy.

  3. Now I’m getting a 401 error.
    any ideas?

Here is my code:

const getVenues = async () => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10`;
  const options = {
    method: 'GET',
    mode: 'no-cors',
    headers: {
      Accept: 'application/json', 
      Authorization: 'API Key' }

  try { 
    const response = await fetch(urlToFetch, options);

Yes, I also found that no-cors bypasses the CORS error but, as you say, you get 401 instead which is an authorization error. After searching for information I found this:

In the no-cors mode, the browser is limited to sending “simple” requests — those with safelisted methods and safelisted headers only.

To send a cross-origin request with headers like Authorization and X-My-Custom-Header , you have to drop the no-cors mode…

So basically, when setting mode to no-cors you are basically not sending the Authorization header, I guess since it’s not a safelisted header, and therefore you get the authorization error. In other words, I’m stuck! :pensive:

1 Like

I’m having the exact same problem. Tried the new url and Authorization Header but getting CORS error. Glad I found this topic before spending hours trying to figure it out! Will wait for Codecademy to update the project.

Hi, I have the same proble, and the workaround that I found was to disable the CORS in chrome with this video:



I finished the project with the updated version three of four square API.
You can check the final result here in my github:

If you have any question, please let me know.



I just want everyone to know that Camilo Vargas’ code works a treat for foursquare api v3. If Codecademy haven’t updated the project yet and you’re stuck, definitely open up their github for hints.

A couple things to look out for as you go through the project:

  • Some of the properties for the venue objects have changed. If you follow the un-updated Codecademy steps exactly, you will sometimes get TypeErrors (cannot read properties of undefined). Use your browser console to examine the objects of interest, or simply follow Camilo’s code.
  • clientId and clientSecret are unused. The important thing is to generate an API key and use it as the value string for your Authorization in the headers object.

Thank you so much for the help, Camilo!


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>`; }
1 Like

Codecademy has updated the project to include the updated Foursquare API! Changes are live as of Jan 12, 2022.