Problems reading JSON file in D3 javascript in some (not all) browsers

问题

I get this error in Chrome immediately after reading a JSON file. It works correctly in Safari and Firefox.

console.log ("event -> "+ postcards.nodes[0].node.event); // "tally" in Safari "TypeError: Cannot read property 'node' of undefined" in Chrome.<

Is there a limit to the levels in a nested JSON file? I generate the JSON from a Drupal view. Here here is the start:

{"nodes":[{"node":{"w1":"","w2":"1","w3":"","w4":"", ...<

Here is the Javascript:

d3.json(
  "/sites/default/d3_files/json/toronto-wards.json", 
  function(error,wards) {
    d3.json("/postcards-json", function(error, postcards) {
      console.log ("event -> "+ postcards.nodes[0].node.event); // tally in Safari

I'm using macOS and my friends using Windows get the same error in Firefox.

As per request here is what I think is the XHR message:

d3.min.js:1 XHR finished loading: GET "http://www.stopplastics.ca/postcards-json".

回答1:

Does the following work for you?

Promise.all(
  d3.json("/sites/default/d3_files/json/toronto-wards.json"),
  d3.json("/postcards-json")
)
.then(
  function([wards,postcards]) {
    console.log ("event -> "+ postcards.nodes[0].node.event); // tally in Safari

Some browsers may not support deconstructing arrays so probably better to try the following for older browsers (non Chrome and Firefox):

Promise.all(
  d3.json("/sites/default/d3_files/json/toronto-wards.json"),
  d3.json("/postcards-json")
)
.then(
  function(results) {
    var wards=results[0],postcards=results[1];
    console.log ("event -> "+ postcards.nodes[0].node.event);
  }
);

According to the comments your drupal end point providing the JSON needs authentication so gives you empty data when you're not loged in.

Error has maybe nothing to do with the browser used but depends if you're loged in or not.

回答2:

The problem was caused by the Drupal view not being created correctly. Nothing to do with the Chrome browser.

来源：https://stackoverflow.com/questions/48646465/problems-reading-json-file-in-d3-javascript-in-some-not-all-browsers

标签

javascript

json

d3.js

drupal-7