Displaying JSON Data

Question

I am really somewhat baffled:

I have the following JSON data in a file called: data.json

{
   "locations": [
      {
         "title": "The Space Needle",
         "latitude": 47.619,
         "longitude": -122.348
      },
      {
         "title": "Albany",
         "latitude": 46,
         "longitude": -74
      }
   ]
}

When I use the following code to try and display the data I get nothing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Another gone south</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
    $.getJSON("data.json",function(data){
        $.each(data.locations, function(i,location){
                content += '<p>' + location.title + '</p>';
                content += '<p>' + location.latitude + '</p>';
                content += '<p' + location.longitude + '</p>';
                content += '<br/>';
                alert('aler called');
                $(content).appendTo("#loc");
        });
    });   
});
/* ]]> */
</script>
</head>
<body>
        <div class="container">
                <div class="span-24">
                       <h2>Check out the following locations:</h2>
                                        <div id="loc">
                                        </div>
                </div>
        </div>
</body>
</html>

First thing...do you know you are loading the actual JSON file? What kind of errors show up in your debugging console? What Have You Tried? — JayC, Aug 14 '12 at 16:42

Nope · Answer 1 · 2012-08-14T17:29:56.613

1

Assuming your json is returned your loop seems fine ~~the only thing you may need to do is parse your JSON result before using it~~:

I looked at this again after what JayC said, I had the JSON value added to my example to a string (d'oh), off course ones I made it an object the each worked perfectly fine.

See DEMO with JSON object (not string)

Basically your code should work perfectly fine which means either the request generates an error or you just get nothing returned.

Check the debug-console in the browser any errors. In FF you can use FireBug or in Chrome and IE use the build-in ones.

edited Aug 14 '12 at 17:29

answered Aug 14 '12 at 16:54

Nope

22,147
7
47
72

Sorry, my point didn't get across. `getJSON` should never have to require manual parsing.... *because it's assumed you get JSON*. It parses for you. – JayC Aug 14 '12 at 17:06
@JayC: Thanks again for your comments, as you see in my edit I was being a plank and tested it with the string version of the JSON object. Ones I used an actual JSON object it worked fine so the issue must be related to the request itself,..maybe cross-domain or something like that, not sure, I think OP needs to check console output.... as you suggested originally :) – Nope Aug 14 '12 at 17:37

score 0 · Answer 2 · edited May 23 '17 at 11:48

Just a wild shot, what browser are you using ? Is it not Chrome ? Is it not working Firefox as well ? Because I've tried it in Firefox and it works correctly, displays both data and alerts. In Chrome I get error

XMLHttpRequest cannot load file:///PATH. Origin null is not allowed by Access-Control-Allow-Origin.

After some digging I found out that it may be problem with chrome, you may need to run it with

chrome.exe --allow-file-access-from-file

You may also need to define variable 'content' (for chrome), such as:

$(document).ready(function(){
    content = $(this).html();
    $.getJSON("data.json",function(data){
        $.each(data.locations, function(i,location){
                content += '<p>' + location.title + '</p>';
                content += '<p>' + location.latitude + '</p>';
                content += '<p' + location.longitude + '</p>';
                content += '<br/>';
               alert('aler called');
             $(content).appendTo("#loc");
        });
    });   
});

This way it is working for both Chrome and Firefox (at my computer). To sum it up: It's seems to be problem with Chrome, and should work on external server.

Chrome issue link

Displaying JSON Data

2 Answers2