Question

Possible Duplicate:
Accessing JSON service from localhost or file://

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$.getJSON('http://game4u.comuf.com/songs.json', function(data) { 

  var output = data.music[0].url; 
  document.getElementById("placeholder").innerHTML = output;

});
</script>

But my JSON file ( music[0].url ) is not displayed in the browser when I run this. I am running the HTML on locally , not on the same server as the the website.

Answer 1

I am running the HTML on locally , not on the same server as the the website.

That would be the problem. getJSON is an “ajax” call, and those are limited by the Same Origin Policy. Your local file system is not the same origin as http://game4u.comuf.com/songs.json (although some browsers treat the local file system as matching any origin; most don’t).

If you control the content at http://game4u.comuf.com/songs.json, you can use JSON-P instead of JSON. JSON-P works around the SOP. Another option is Cross-Origin Resource Sharing, which also requires that the server end do something (in this case, grant access to origin “null”) and also requires that you use a browser that supports it (all modern ones do, IE9 only does if you work around the fact it requires you to use an XDR instead of XHR object; this is something jQuery doesn’t do for you although there are plug-ins that do).

---

Separately, as Musa pointed out, your JSON is invalid. It would be valid if you corrected the backslashes in the URL (they should be slashes [/], not backslashes [\]) and if you remove the trailing , at the end of the list, which is not valid in JSON.