Загрузка значений JSON на JavaScript

Я не могу найти, что не так с кодом, указанным ниже. Он не загружает значения values.json в переменные состояния. Если я document.write (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' будет ASync .. это означает, что его нет в наличии для' 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 асинхронная функция. Если вы хотите document.write функционировать должным образом, он должен будет быть добавлен в функцию обратного вызова следующим образом:

$.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

ответ

Смежные вопросы