JSON Flickr API. Parsererror and Unexpected token in JSON at position

Question

I am trying to make use of the Flickr API and I am coming across problems. The data is being retrieved and is then view-able in the Network. Problem is that after the JSON data is retrieved it then fails and I get the errors.

Request failed: parsererror, SyntaxError: Unexpected token j in JSON at position 0

Can anyone see what is wrong and how to fix? Thank you.

function callToFlickr(){

        console.log('callToFlickr has started');

        var apiQueryStringUrl = "https://api.flickr.com/services/rest/?";
        $.getJSON( apiQueryStringUrl,
        {
            method: "flickr.photos.search",
            api_key: "6ef79f17371106eac95281f7b051492c",
            lat: "26.335100",
            lon: "17.228331",
            format: "json"
        } )

        .done( function ( data ) {
            console.log('Data... '+data);

            // $.each(data.photos, function(i,photo){
            //     $("<img/>").attr("src", photo.id).prependTo("#results");
            //         if ( i == 10 ) 
            //             return false;
            })

        .fail( function ( jqxhr, textStatus, error ) {
            var err = textStatus + ", " + error;
            console.log( "Request failed: " + err);

        });
    }

Answer 1

The API you are looking at wants you to use the URL that you are evaluating to as the src or a <script> tag so that it can call a function, jsonFlickrApi with the data. That means it's actually a JSONP response, but let's not argue semantics.

That's why, if you look at the text of the response, it looks like:

jsonFlickrApi({...})

The error you are getting shows that the character at position 0 is j and that matches with the response you are getting. That isn't JSON though, so you get an error.

---

Instead, add the attribute nojsoncallback to your query string so it will give you the raw data as JSON. Like this:

{
    method: "flickr.photos.search",
    api_key: "MY_API_KEY",
    lat: "26.335100",
    lon: "17.228331",
    format: "json",
    /*******************/
    nojsoncallback: true
    /*******************/
}

See the documentation here: Callback Function .

And you can see it working here:

 function callToFlickr() { console.log('callToFlickr has started'); var apiQueryStringUrl = "https://api.flickr.com/services/rest/?"; $.getJSON(apiQueryStringUrl, { method: "flickr.photos.search", api_key: "6ef79f17371106eac95281f7b051492c", lat: "26.335100", lon: "17.228331", format: "json", /*******************/ nojsoncallback: true /*******************/ }) .done(function(data) { console.log('Data... ' + data); console.log('Data... ' + JSON.stringify(data)); // $.each(data.photos, function(i,photo){ // $("<img/>").attr("src", photo.id).prependTo("#results"); // if ( i == 10 ) // return false; }) .fail(function(jqxhr, textStatus, error) { var err = textStatus + ", " + error; console.log("Request failed: " + err); }); } callToFlickr(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

If you'd rather stick with the JSONP approach (I wouldn't), jQuery .ajax supports JSONP responses, see jQuery - Working with JSONP , with this syntax:

 function callToFlickr() { $.ajax({ url: "https://api.flickr.com/services/rest/?", dataType: "jsonp", jsonp: "jsoncallback", data: { method: "flickr.photos.search", api_key: "6ef79f17371106eac95281f7b051492c", lat: "26.335100", lon: "17.228331", format: "json" } }) .done(function(data) { console.log('Data... ' + data); }) .fail(function(jqxhr, textStatus, error) { var err = textStatus + ", " + error; console.log("Request failed: " + err); }); } callToFlickr(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>