JSON data undefined from external file in d3.js?

Question

I'm developing a d3.js app that reads data from a external JSON file. I feel like I've tried everything, but everytime I try to load the data and display it in console.log, console.log displays the data as undefined. I'm running a Python web server with python -m SimpleHTTPServer on Firefox to avoid cross origin resource sharing problems, but I haven't had any luck actually getting the data into the browser. My code:

<html>
    <head>
        <meta charset='utf-8'>
        <title>JSON Data Read</title>
    </head>
    <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>        
        <script>
var dataset;
d3.json('course.json', function(error, json) {
    dataset = json;
    console.log(dataset);
});
        </script>
    </body>
</html>

Any advice?

Edit: JSON file

{
    "course_id": "Course 1", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 1 Title"
}{
    "course_id": "Course 2", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 2 Title"
}{
    "course_id": "Course 3", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 3 Title"
}

Look at the request in the webinspector tab (F12 > Network). — Halcyon
– Halcyon, Commented Sep 17, 2015 at 17:09
@Halcyon SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 6 column 2 of the JSON data I've looked at the JSON file and can't figure out where the whitespace character is on line 6. I generated the JSON using Python, so the problem must be there I guess? — user2740614
– user2740614, Commented Sep 17, 2015 at 17:21
Can post the JSON file? (or a part containing everyting up to that line) — Halcyon
– Halcyon, Commented Sep 17, 2015 at 17:22

Halcyon · Accepted Answer · 2015-09-17 17:34:11Z

Your JSON file is not valid JSON:

{
    "course_id": "Course 1", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 1 Title"
}/* <-- JSON block ends here, no further content is expected */{
    "course_id": "Course 2", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 2 Title"
}{
    "course_id": "Course 3", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 3 Title"
}

This would be valid:

[ {
    "course_id": "Course 1", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 1 Title"
}, {
    "course_id": "Course 2", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 2 Title"
}, {
    "course_id": "Course 3", 
    "prereqs": null, 
    "off_w": null, 
    "name": "Course 3 Title"
} ]

Added [, ] and a , between the objects.

The error message is a little bit cryptic. JSON is whitespace insensitive so after } you can have as much whitespace as you want, just not another { or any other non-whitespace character.

Collectives™ on Stack Overflow

JSON data undefined from external file in d3.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related