JQuery ajax getJSON response has size but empty body?

Question

We are trying to hit the meetup.com api using jquery's getJSON() method and are running into some problems. In firebug we can run

$.getJSON(
'http://api.meetup.com/events.json?group_urlname=Closing-the-NOLA-Gap&key=ourkey', 
function(data) { console.log(data) }
);

We can see the call taking some time. We can inspect the response header and see the content size is 42K, yet the content body (as shown by firebug) is empty! How is this possible?

When we point to the url in the browser we have all the appropriate json formatted text appear on the page.

What are we missing?

PS. We've tried $.ajax, and $.get - same results with each. We also tried it with 3 parameters where the first is url, the second is null, and the third is the callback.

Answer 1

Make sure you have callback=? in the querystring of the URL you're hitting...since it's a remote domain, you need to use JSONP here (which callback=? triggers). Like this:

$.getJSON(
 'http://api.meetup.com/events.json?group_urlname=Closing-the-NOLA-Gap&key=ourkey&callback=?', 
 function(data) { console.log(data); }
);

From the $.getJSON() docs:

If the URL includes the string "callback=?" in the URL, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.