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>