Loading JSON in D3 v5 via Fetch API in Chrome?

Question

When running the following code in Chrome, d3.json callback is not triggered until pubs.json is loaded in another browser tab/window. It works when the d3.json is pasted into the Chrome browser console, it works if running in Firefox...

I'm using Python's http.server on localhost.

Why does it act this way in Chrome?

dir structure:

proj/
  index.html
  pubs.json

code:

<html>
  ...
  <body>
    ...
    <script>
        $(document).ready(function(){
            d3.json("/pubs.json").then(function(data) {
                console.log(data);
            });
        });
    </script>
  </body>
</html>

What do you mean by "until pubs.json is loaded in another browser tab/window" ? Do you have a link to reproduce your issue ? — Pierre Capo
– Pierre Capo, Commented Jul 30, 2018 at 21:35
Script tag should be inside body tag. Is that only typo while rewriting to this post? — bigless
– bigless, Commented Jul 30, 2018 at 21:45
I know this might be a silly question, but have you checked if you are running a proper server to test that code? Javascript in general has several limitations when not working with proper permissions, and while firefox and safari lets you circumvent this somewhat, chrome doesn't. — Manuel Alejandro Caetano
– Manuel Alejandro Caetano, Commented Jul 30, 2018 at 22:49
@ManuelAlejandroCaetano probably not "proper". I'm using Python's http.server. Thought I've never had this problem before. — conner.xyz
– conner.xyz, Commented Jul 31, 2018 at 1:30
@PierreCapo I mean that – the best of my knowledge – the promise is pending on loading the page. Then if, in another browser tab/window, I load <host>/pubs.json the promise fulfills in the original tab/window. — conner.xyz
– conner.xyz, Commented Jul 31, 2018 at 1:34

rioV8 · Accepted Answer · 2018-07-30 23:21:06Z

-1

Chrome is pedantic regarding CORS (Same Origin)

Try the following:

d3.json(chartURL, {credentials: 'same-origin'}).then(function(data) {
    ....
});

If the file is loaded by another tab it can be found in the cache and maybe then the requirements are not that strict any more.

answered Jul 30, 2018 at 23:21

rioV8

29.7k4 gold badges48 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Loading JSON in D3 v5 via Fetch API in Chrome?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related