2

I'm having a problem with loading an external JSON file, data.json into this D3.js script. I don't know if this is important, but I'm running a server with Python 3 and on 0.0.0.0:8888. Here's the issue that is troubling me:

  • When I explicitly define a variable with JSON data and use console.log, then the Chrome Developer console shows that an object is being outputted by the script.
  • When I use d3.json to load an external JSON file with an array of objects, then the Chrome Developer console outputs undefined.

JSON file - data.json

[{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]

Website - index.html

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data;
d3.json("data.json", function(d) {
    data = d;
});
console.log(data);
</script>
</html>

When run, the console outputs undefined instead of outputting the contents of the JSON object that is inside of the array sotred in the data.json file.

However, the second method works perfectly fine and the console outputs [Object], indicating that the JSON was successfully detected. 

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},];
console.log(data);
</script>
</html>

What am I doing wrong here? I've tried adjusting the JSON object, putting console.log inside of the D3 function, but nothing seems to work.

Edit: The weird part is that when I change the JSON file to this, it works perfectly:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}
Shrey
  • 522
  • 8
  • 16
  • 1
    You cant load local files .. Similar question http://stackoverflow.com/questions/371875/local-file-access-with-javascript – Vijay Kukkala Mar 17 '16 at 03:34
  • I forgot to include this - I was able to read the local JSON file for about five minutes. Then, I changed something and then it stopped working. I'm wondering what the permanent solution can be to this problem. – Shrey Mar 17 '16 at 03:37

3 Answers3

0

your data is undefined because console.log function get fired before d3 function.

d3 load file asynchronously.

try this 

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var data;
    d3.json("data.json", function(d) {
    data = d;
    console.log(data);
 });
</script>
</html>
Semooze
  • 143
  • 10
  • Doesn't work - it says `null`. Also tried removing the `data` variable and doing `console.log(d)`, which gives me the same response. – Shrey Mar 17 '16 at 03:42
  • @Shrey you problem isn't this XMLHttpRequest cannot load file:///home/myuser/tmp/d3/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource, is it ? – Semooze Mar 17 '16 at 03:45
  • It might be, but I'm not entirely sure. Is there any reason why you suggest this? – Shrey Mar 17 '16 at 03:51
  • @Shrey I tested your code and get that error but I don't know how you set up your server so I'm not sure it is cross origin requests problem or not. You should try to load another external data via http protocol.I try this https://api.github.com/users/mralexgray/repos and it works. – Semooze Mar 17 '16 at 04:02
0

Ah, so I played around with the JSON file and found the problem. It seems like I added an extra , after the first object, and so D3 didn't like the extra comma. Changing the JSON file to this fixed it:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}
Shrey
  • 522
  • 8
  • 16
0

In your data.json file , [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]

You have a comma at end of it.

If you remove it ,it should work fine [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}]

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data;
d3.json("data.json", function(d) {
data = d;
console.log(data);
});
</script>
</html>
sridhar..
  • 1,945
  • 15
  • 19
  • Yeah, I realized that this was the problem. However, why is it that `[{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]` works when directly assigning it to a variable? The script seems to fail only when this is read externally. – Shrey Mar 17 '16 at 14:24