Question

I have a json file being stored in a static url, i would like to grab it and pull our the data objects.

<div id="content"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.getJSON('https://s3.amazonaws.com/wallyball_production/comedy.json', function(data){
            $("#content").html(data);
        });

    });
  </script>

This isn’t outputting anything? I did it very quickly, not sure why I’m not seeing anything?

Answer 1

Cross-domain AJAX calls require jsonp (or writing a proxy server-side script). As long as the remote-server is setup properly (I’d think Amazon would be) it’s pretty easy with jQuery:

$.ajax({
    url      : 'https://s3.amazonaws.com/wallyball_production/comedy.json',
    dataType : 'jsonp',
    success  : function (data) {
        //$('#content').html(data);
        for (var i = 0, len = data.length; i < len; i++) {
            //`data[i].something` will access the `something` property an index of the JSON returned
        }
    }
});

Note that you will get JSON in response so you will need to iterate through it before appending it to the DOM.

Here are docs for jQuery’s $.ajax(): http://api.jquery.com/jquery.ajax