jQuery getJSON never enters its callback function

Question

I've been sitting with this for hours now, and I cant understand why.

• q is working. The URL does give me a proper JSON-response. It shows up as objects and arrays and whatnot under the JSON tab under the Net-tab in Firebug and all is fine. I've also tried with other URLs that i know work. Same thing happens.

• I have another function elsewhere in my tiny app, wihch works fine, and is pretty much exactly the same thing, just another API and is called from elsewhere. Works fine, and the data variable is filled when it enters the getJSON-function. Here, data never gets filled with anything.

• I've had breakpoints on every single line in Firebug, with no result. Nothing happens. It simply reaches the getJSON-line, and then skips to the debugger-statement after the function.

  var usedTagCount = 10;
  var searchHits = 20;
  var apiKey = "a68277b574f4529ace610c2c8386b0ba";
  
  var searchAPI = "http://www.flickr.com/services/rest/?method=flickr.photos.search&" + 
              "format=json&api_key=" + apiKey + "&sort=interestingness-desc&per_page="
               + searchHits + "&jsoncallback=?&nojsoncallback=1&tags=";
  
  var tagString = "";
  var flickrImageData = new Array();
  
  function search(query) {
      for(var i = 0; i < usedTagCount; i++) {
          tagString += query[i].key + ",";
      }
  
      var q = searchAPI + tagString;
  
      $.getJSON(q, function(data) {   
          debugger; /* It never gets here! */
  
          $.each(data.photos.photo, function(i, item) {
              debugger;
              flickrImageData.push(item);             
          });
      });
  
      debugger;
      return flickrImageData;
  }
  

Example of request URL (q):

http://www.flickr.com/services/rest/?method=flickr.photos.search&format=json&api_key=a68277b574f4529ace610c2c8386b0ba&sort=interestingness-desc&per_page=20&jsoncallback=?&tags=london,senior,iphone,royal,year,security,project,records,online,after,

I do wonder, since JSONView (the firefox plugin) cannot format it properly, that it isn't really JSON that is returned - the mime-type is text/html. Firebug, however, interprets it as JSON (as i stated above). And all the tag words come from another part of the app.

Answer 1

I think you might need to remove the

nojsoncallback=1

from your searchAPI string.

Flickr uses JSONP to enable cross domain calls. This method requires the JSON to be wrapped in a json callback, the nojsoncallback=1 parameter removes this wrapping.

EDIT: Apparently it works with nojsoncallback=1, I got this piece of code to work for me. What jQuery version are you using? JSONP is only available from 1.2 and up.

This works for me (slight modifications):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

var usedTagCount = 1;
var searchHits = 20;
var apiKey = "a68277b574f4529ace610c2c8386b0ba";


var searchAPI = "http://www.flickr.com/services/rest/?method=flickr.photos.search&" + 
                    "format=json&api_key=" + apiKey + "&sort=interestingness-desc&per_page="
                     + searchHits + "&jsoncallback=?&nojsoncallback=1&tags=";


var tagString = "";
var flickrImageData = new Array();


function search(query) {
tagString = query;


var q = searchAPI + tagString;


$.getJSON(q, function(data) {   


    $.each(data.photos.photo, function(i, item) {
            debugger;
            flickrImageData.push(item);                          
    });
});

}

search("cat");

</script>

Answer 2

When I try the url: http://www.flickr.com/services/rest/?method=flickr.photos.search&format=json&api_key=a68277b574f4529ace610c2c8386b0ba&sort=interestingness-desc&per_page=10&tags=mongo

it returns data, as it should - try to change the getJSON to an $.ajax() and define a function jsonFlickrApi (data) with the code you have in you callback function.

If that don't work - please post code to at jsbin.com <- so we can try it live - so much easier to debug.