getJson to load external data and display it as string

Question

Given a JSON file at http://codio.io/hugolpz/Cat-is-smart/data/dict.json.

Given I want to load it, then to display it (get my hand on it and use it).

I thus use:

$.getJSON( "http://codio.io/hugolpz/Cat-is-smart/data/dict.json", function( json ) {
  console.log("This step is fired."); // OR NOT !
  alert( "JSON Data: " + JSON.stringify(json) );
 });

or

$.ajax({
        url: "http://codio.io/hugolpz/Cat-is-smart/data/dict.json",
        dataType: 'json',
        success: function(json2) {
            alert( "JSON Data: " + JSON.stringify(json2) );
        }
});

None work, even when tested on same domain.

What do I wrong ? How to fix it.

http://jsfiddle.net/676V5/1/

Answer 1

Invalid JSON. I suggest using a tool like JSONLint in future, it will save you a lot of hassle!

Answer 2

If you use $(document).load like below, you can get json data:

$(document).load( "http://codio.io/hugolpz/Cat-is-smart/data/dict.json", function( json ) 
{
     alert("finish"); // OR NOT !
     alert( "JSON Data: " + JSON.stringify(json) );
});

Answer 3

the url you are calling might not returning the json data. It may be in string format. Try by changing "dataType" to "text" instead of "json"

Answer 4

Always check for errors...at first it gives me a parseError fail; now it works:

head:

<script type='text/javascript'>
$(document).ready(function(){
    var request = $.ajax({
      url: "http://codio.io/hugolpz/Cat-is-smart/data/dict.json",
      type: "GET",
      dataType: "html"
    });

    request.done(function( msg ) {
      $( "#log" ).html( msg );
    });

    request.fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });
});
</script>

Body:

<div id="log"></div>