JQuery getJSON request returning an empty valid request

Question

I am trying to grab JSON from Apple iTunes JSON service. The request is simple: http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/wsSearch?term=jac&limit=25

If you visited the URL of your browser, you will see some well-formed (backed up by jsonlint.com) JSON. However, when I use the following jQuery for the query, the query does not find anything:

$("#soundtrack").keypress(function(){ $.getJSON("http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/wsSearch",{'term':$(this).val(), 'limit':'25'}, function(j){ var options = ''; for (var i = 0; i < j.results.length; i++) { options += '<option value="' + j.results[i].trackId + '">' + j.results[i].artistName + ' - ' + j.results[i].trackName + '</option>'; } $("#track_id").html(options); }); }); 

Firebug sees the request, but receives only an empty response.

Any help would be appreciated here, as I am in my power trying to solve it. You can view the script here: http://rnmtest.co.uk/gd/drives_admin/add_drive (the soundtrack input field is at the bottom of the page).

thanks

Answer 1

To perform cross-domain requests, you will need to use JSONP. This can help:

 $.ajax({ url: "http://ax.phobos.apple.com.edgesuite.net/WebObjects/MZStoreServices.woa/wa/wsSearch", dataType: 'jsonp', data: {'term':$(this).val(), 'limit':'25'}, success: function(j){ var options = ''; for (var i = 0; i < j.results.length; i++) { options += '<option value="' + j.results[i].trackId + '">' + j.results[i].artistName + ' - ' + j.results[i].trackName + '</option>'; } $("#track_id").html(options); } }); 

Answer 2

Or you just change the URL a bit. From

 http://ax.phobos.apple.com.edgesuite.net/.../wa/wsSearch" 

to

 http://ax.phobos.apple.com.edgesuite.net/.../wa/wsSearch?callback=?" 

And keep using $.getJSON instead of switching to $.ajax

From jQuery.getJSON documentation

If the URL contains the string "callback=?" in the url, the request is treated as JSONP .