Unable to load json file in html using d3.js

Question

I want to load data from a json file in an HTML file and use D3 to visualize it. I am able to view the data in the browser if the file is loaded on its own. The file is also received correctly verified by the 200 status. But the contents of the file are interpreted as null.

Here are the contents of the json file -

[{"totdistance":[[1987,20926761],[1988,81974990],[1989,93470285],[1990,116938068],[1991,128179520],[1992,123889922],[1993,113169123],[1994,119145135],[1995,132070386],[1996,145689003],[1997,158173093],[1998,164900616],[1999,180094162],[2000,191005263],[2001,186583998],[2002,185726579],[2003,189239126],[2004,203622782],[2005,200373825]],"routes":[[1987,45399],[1988,180871],[1989,195588],[1990,216314],[1991,219896],[1992,199066],[1993,176756],[1994,177851],[1995,194508],[1996,203001],[1997,206304],[1998,203071],[1999,209496],[2000,219160],[2001,209979],[2002,196111],[2003,189519],[2004,195939],[2005,197853]],"code":"HP","name":"HP","avgdelay":[[1987,16],[1988,8],[1989,11],[1990,12],[1991,12],[1992,7],[1993,11],[1994,15],[1995,17],[1996,23],[1997,17],[1998,29],[1999,25],[2000,28],[2001,18],[2002,9],[2003,13],[2004,25],[2005,18]]}]

Here is the code that tries to load the file and read its contents -

d3.json("flights.json", function(flights) {

But I get error on the console that flights is null.

I have tried running this code on a webserver using IE, Firefox and Chrome. But no solution.

I am using this as a starting point - https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html

Here is the error - Uncaught TypeError: Cannot call method 'map' of null

The json is valid as per http://jsonlint.com/

Thanks for any help to fix this issue.

code snippets rarely help, you need to post meaningful code samples or fiddler links so we can help — Neil S
– Neil S, Commented Aug 23, 2013 at 0:16
I am able to load it just fine. Can you post your complete code? — Isaac
– Isaac, Commented Aug 23, 2013 at 5:35
also if you could post a link to the actual json file... If you are passing the json lint from copy and pasting the json, it is possible that the encoding on the file or your text editor could be adding invalid characters in the file, leading to parse errors. — Neil S
– Neil S, Commented Aug 23, 2013 at 17:14

Neil S · Accepted Answer · 2013-08-23 00:22:39Z

1

according to this, the correct syntax of d3.json is

d3.json('URL', function(error, json) {

so it appears you might be trying to access the error argument, which if there is no error, could be null.

answered Aug 23, 2013 at 0:22

Neil S

2,30421 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sumod Over a year ago

After trying with v3, I am now trying with v2 to see if that makes a difference. It seems there is some issue with json and I am not able to figure it out. I get the error in Chrome - Uncaught SyntaxError: Unexpected token ' and in Firefox, I get the error - [13:19:11.701] SyntaxError: JSON.parse: expected property name or '}' @ d3js.org/d3.v2.js?2.8.1:2950.

Sumod Over a year ago

Here is the json file - Here is my json file - [{"totdistance":[[1987,20926761],[1988,81974990],[1989,93470285],[1990,116938068],[1991,128179520],[1992,123889922],[1993,113169123],[1994,119145135],[1995,132070386],[1996,145689003],[1997,158173093],[1998,164900616],[1999,180094162],[2000,191005263],[2001,186583998],[2002,185726579],[2003,189239126],[2004,203622782],[2005,200373825]],

Sumod Over a year ago

json file continued (restriction on number of characters) -"routes":[[1987,45399],[1988,180871],[1989,195588],[1990,216314],[1991,219896],[1992,199066],[1993,176756],[1994,177851],[1995,194508],[1996,203001],[1997,206304],[1998,203071],[1999,209496],[2000,219160],[2001,209979],[2002,196111],[2003,189519],[2004,195939],[2005,197853]],"code":"HP","name":"HP","avgdelay":[[1987,16],[1988,8],[1989,11],[1990,12],[1991,12],[1992,7],[1993,11],[1994,15],[1995,17],[1996,23],[1997,17],[1998,29],[1999,25],[2000,28],[2001,18],[2002,9],[2003,13],[2004,25],[2005,18]]}]

Neil S Over a year ago

you don't need to paste your json value if it passes the json lint validator. It's really no use in the comments.

Sumod · Accepted Answer · 2013-08-29 03:12:32Z

1

I have switched to version 2.8 and it is working fine. One thing I noticed was that I was calling one variable as avgdelay and that was an issue. Once I renamed the variable to another one, d3 had no problems. I think it is kind of weird. But as of now, it has fixed the problem I was facing. I am closing the question.

answered Aug 29, 2013 at 3:12

Sumod

3,8469 gold badges52 silver badges70 bronze badges

Collectives™ on Stack Overflow

Unable to load json file in html using d3.js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related