Loading Values of a JSON to JavaScript
Question
I cant find what is wrong with the code listed below. It is not loading the values of values.json into the variable statesau. If I document.write(JSON.stringify(statesau)) I get {}
The content of values.json is
{
"values": {
"New South Wales": 8,
"Victoria": 6,
"Queensland": 3,
"South Australia": 7,
"Western Australia": 4,
"Tasmania": 6,
"Northern Territory": 7
}
}
The HTML code is here:
<!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]) .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>
2 answers
solution1
0
When you have asynchronous function like getJSON , you need to restructure your code.
<!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>
solution2
0 2016-07-14 19:41:31
The main problem is that, as webdeb mentioned in his comment, $.getJSON is an asynchronous function. If you want document.write to function properly, it will have to be added to the callback like so:
$.getJSON('values.json', function(data) {
statesau=data;
document.write(JSON.stringify(statesau));
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.