将JSON的值加载到JavaScript

我无法找到下面列出的代码有什么问题。它不会将values.json的值加载到变量statesau中。如果我文件撰写（JSON.stringify（statesau））我得到{}将JSON的值加载到JavaScript

values.json的内容是

{ 
"values": { 
    "New South Wales": 8, 
    "Victoria": 6, 
    "Queensland": 3, 
    "South Australia": 7, 
    "Western Australia": 4, 
    "Tasmania": 6, 
    "Northern Territory": 7 
} 
}

的HTML代码是在这里：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Wave to GeoJSON</title> 
 
    <script src="http://d3js.org/d3.v2.js" charset="utf-8"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <style type="text/css"> 
 
#states path { 
 
    stroke: #fff; 
 
} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1>Wave to GeoJSON</h1> 
 
    <script type="text/javascript"> 
 
    var statesau={}; 
 
    $.getJSON('values.json', function(data) { 
 
    statesau=data; 
 
    }); 
 
    document.write(JSON.stringify(statesau)); 
 
var w = 960, 
 
    h = 500; 
 
var z = d3.scale.category10(); 
 
var fill = d3.scale.log() 
 
    .domain(d3.extent(d3.values(statesau))) 
 
    .range(["brown", "steelblue"]); 
 
var projection = d3.geo.azimuthal() 
 
    .origin([135, -26]) 
 
\t \t .translate([250,180]) 
 
    .scale(700); 
 
var path = d3.geo.path() 
 
    .projection(projection); 
 
var svg = d3.select("body").append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 
var states = svg.append("g") 
 
    .attr("id", "states"); 
 
d3.json("au-states.json", function(collection) { 
 
    states.selectAll("path") 
 
     .data(collection.features) 
 
    .enter().append("path") 
 
\t \t \t .attr("fill", function(d) { 
 
     return fill(statesau[(d.properties["STATE_NAME"])]); 
 
     }) 
 
     .attr("d", path); 
 
}); 
 
</script> 
 

 
    </body> 
 
</html>

来源

2016-07-14 Dawid

在'getJSON'功能将异步..这意味着它不适用于'document.write' – webdeb

所以如果我想查看页面上的内容 - 我会使用哪些代码？谢谢！ – Dawid

当你有像getJSON这样的异步函数时，你需要重构你的代码。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Wave to GeoJSON</title> 
    <script src="http://d3js.org/d3.v2.js" charset="utf-8"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <style type="text/css"> 
#states path { 
    stroke: #fff; 
} 
    </style> 
    </head> 
    <body> 
    <h1>Wave to GeoJSON</h1> 
    <script type="text/javascript"> 
     var statesau={}; 
      $.getJSON('values.json', function(data) { 
      statesau=data; 
      restOfCode(); 
      }); 
      function restOfCode(){ 
        document.write(JSON.stringify(statesau)); 
       var w = 960, 
        h = 500; 
       var z = d3.scale.category10(); 
       var fill = d3.scale.log() 
        .domain(d3.extent(d3.values(statesau))) 
        .range(["brown", "steelblue"]); 
       var projection = d3.geo.azimuthal() 
        .origin([135, -26]) 
         .translate([250,180]) 
        .scale(700); 
       var path = d3.geo.path() 
        .projection(projection); 
       var svg = d3.select("body").append("svg") 
        .attr("width", w) 
        .attr("height", h); 
       var states = svg.append("g") 
        .attr("id", "states"); 
       d3.json("au-states.json", function(collection) { 
        states.selectAll("path") 
         .data(collection.features) 
        .enter().append("path") 
          .attr("fill", function(d) { 
         return fill(statesau[(d.properties["STATE_NAME"])]); 
         }) 
         .attr("d", path); 
       }); 
      } 
     </script> 

    </body> 
</html>

来源

2016-07-14 19:37:52

的主要问题是，在他的评论中提到webdeb，$.getJSON是一个异步函数。如果你想文件撰写正常工作，它必须被添加到回调，像这样：

$.getJSON('values.json', function(data) { 
    statesau=data; 
    document.write(JSON.stringify(statesau)); 
});

来源

2016-07-14 19:41:31 hootstheowl

[SoftwareEngineer171给出了更全面的答案]（http://stackoverflow.com/a/38382853/6590624）。 – hootstheowl

将JSON的值加载到JavaScript

回答

相关问题