Search code examples
javascriptajaxfoursquare

What is wrong with my foursquare api call?


The live example is here http://kenziejoy.github.io/frontend-nanodegree-map/

I'm trying to pull data about locations that I have hard coded in an array - either by their foursquare id (didn't seem to be working) or their lat and lng. (client ID and secret are variables I just haven't shown them here)

I don't need any other functionality than just pulling data from their database to display on a map so I thought it would fall under the userless access but it is giving me an error that the request are bad because I don't have the proper authentication.

Thanks in advance

From the foursquare site "Userless access

Some of our endpoints that don’t pertain to specific user information, such as venues search are enabled for userless access (meaning you don’t need to have a user auth your app for access). To make a userless request, specify your consumer key's Client ID and Secret instead of an auth token in the request URL.

https://api.foursquare.com/v2/venues/search?ll=40.7,-74&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&v=YYYYMMDD

To see what level of permissions each endpoint needs, check out the filters at the top of our endpoints page."

        /**********FourSquare***************/
    $.ajax({
        url:'https://api.foursquare.com/v2/venues/search',
        dataType: 'json',
        data: 'limit=1' +
                '&ll='+ placeItem.lat() +','+ placeItem.lng() +
                '&?client_id='+ CLIENT_ID +
                '&client_secret='+ CLIENT_SECRET +
                '&v=20140806' +
                '&m=foursquare',
        async: true,

        success: function (data) {
            var result = data.response.venue;
            var contact = result.hasOwnProperty('contact') ? result.contact : '';
            if (contact.hasOwnProperty('formattedPhone')) {
                placeItem.phone(contact.formattedPhone || '');
            }

            var location = result.hasOwnProperty('location') ? result.location : '';
            if (location.hasOwnProperty('address')) {
                placeItem.address(location.address || '');
            }

            var bestPhoto = result.hasOwnProperty('bestPhoto') ? result.bestPhoto : '';
            if (bestPhoto.hasOwnProperty('prefix')) {
                placeItem.photoPrefix(bestPhoto.prefix || '');
            }

            if (bestPhoto.hasOwnProperty('suffix')) {
                placeItem.photoSuffix(bestPhoto.suffix || '');
            }

            var description = result.hasOwnProperty('description') ? result.description : '';
            placeItem.description(description || '');

            var rating = result.hasOwnProperty('rating') ? result.rating : '';
            placeItem.rating(rating || 'none');

            var url = result.hasOwnProperty('url') ? result.url : '';
            placeItem.url(url || '');

            placeItem.canonicalUrl(result.canonicalUrl);

            // Infowindow code is in the success function so that the error message

            // Content of the infowindow
            var contentString = '<div id="iWindow"><h4>' + placeItem.name() + '</h4><div id="pic"><img src="' +
                    placeItem.photoPrefix() + '110x110' + placeItem.photoSuffix() +
                    '" alt="Image Location"></div><p>Information from Foursquare:</p><p>' +
                    placeItem.phone() + '</p><p>' + placeItem.address() + '</p><p>' +
                    placeItem.description() + '</p><p>Rating: ' + placeItem.rating() +
                    '</p><p><a href=' + placeItem.url() + '>' + placeItem.url() +
                    '</a></p><p><a target="_blank" href=' + placeItem.canonicalUrl() +
                    '>Foursquare Page</a></p><p><a target="_blank" href=https://www.google.com/maps/dir/Current+Location/' +
                    placeItem.lat() + ',' + placeItem.lng() + '>Directions</a></p></div>';

            // Add infowindows
                google.maps.event.addListener(placeItem.marker, 'click', function () {
                infowindow.open(map, this);
                // Bounce animation
                placeItem.marker.setAnimation(google.maps.Animation.BOUNCE);
                setTimeout(function () {
                    placeItem.marker.setAnimation(null);
                }, 800);
                infowindow.setContent(contentString);
            });
    },

        // Alert the user on error.
        error: function (e) {
            infowindow.setContent('<h5>Foursquare data is unavailable.</h5>');
            document.getElementById("error").innerHTML = "<h4>Foursquare data is unavailable. Please try refreshing.</h4>";
    }
    });

Solution

  • I took a look at the live example URL and you were getting a lot of bad request errors in the JavaScript console in Chrome.

    Looking at these, you had a bad URL, you were using:

    https://api.foursquare.com/v2/venues/search?limit=1&ll=45.5589522,-122.6517163&?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&v=20140806&m=foursquare
    

    The problem seems to be that you have:

     &?client_id
    

    which makes the URL invalid.

    Changing this to

     &client_id
    

    fixes this and I then see data coming back from Foursquare.