CODEWITHSUNDEEP
javascriptjsond3.js
user2740614
user2740614

Reputation: 283

JSON data undefined from external file in d3.js?

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"
}

Upvotes: 0

Views: 415

Answers (1)

Halcyon
Halcyon

Reputation: 57703

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.

Upvotes: 3

Related Questions