JavaScriptがvarを保持していると認識しないJSON

Question

私は、会社が使用するさまざまなR/Shinyダッシュボードのインデックスページ用にいくつかのゲージをコーディングしようとしています。ページはちょうどそれらの様々なRアプリにつながるいくつかのスタイリングとdivのシリーズです。

最近、私たちのエグゼクティブは、ページの上部に燃料ゲージスタイルのグラフを表示することに多くの関心を示しました。

私はゲージを作るのにJustGageプラグインを使うことに決めました。スーパバイザが一緒にスローしてそのデータをサーバー上のJSONドキュメントにダンプするスクリプトを使用して、csvからデータを取得しています。私たちは6行のJSONファイルを話しています。非常に簡単です。

私はAJAX XMLHttpRequestを使用しています。これはうまくいきました。しかし、whenI変数に解析されたデータを格納し、私のゲージパラメータでそれを参照するために行く、私が取得：検査ウィンドウ内

(index):182 Uncaught ReferenceError: feeData is not defined at (index):182 (anonymous) @ (index):182

を。

その特定の行は、JSONデータを含むvarへの最初の参照です。

いずれのヘルプも...うーん、役に立つ！ここで

<script> 
 
    var xhttp = new XMLHttpRequest(); 
 
xhttp.onreadystatechange = function() { 
 
    var feeData = JSON.parse(this.responseText); 
 
    if (this.readyState == 4 && this.status == 200) { 
 
    var feeData = JSON.parse(this.responseText); 
 
    } 
 
}; 
 
xhttp.open("GET", "test.json", true); 
 
xhttp.send(); 
 
var g = new JustGage({ 
 
    titleFontColor: "black", 
 
    labelFontColor: "black", 
 
    id: "DEF", 
 
    value: feeData.DEFCurrent, 
 
    pointer: true, 
 
    min: 0, 
 
    max: feeData.DEFGoal, 
 
    title: "DEF" 
 
}); 
 
var g = new JustGage({ 
 
    titleFontColor: "black", 
 
    labelFontColor: "black", 
 
    id: "EBO", 
 
    value: feeData.EBOCurrent, 
 
    pointer: true, 
 
    min: 0, 
 
    max: feeData.EBOGoal, 
 
    title: "EBO" 
 
}); 
 
var g = new JustGage({ 
 
    titleFontColor: "black", 
 
    labelFontColor: "black", 
 
    id: "Company", 
 
    value: (feeData.EBOCurrent + feeData.DEFCurrent), 
 
    pointer: true, 
 
    min: 0, 
 
    max: (feeData.EBOGoal + feeData.DEFGoal), 
 
    title: "Company" 
 
}); 
 
var g = new JustGage({ 
 
    titleFontColor: "black", 
 
    labelFontColor: "black", 
 
    id: "Legal", 
 
    value: feeData.LegalCurrent, 
 
    pointer: true, 
 
    min: 0, 
 
    max: feeData.LegalGoal, 
 
    title: "Legal" 
 
}); 
 
</script>

は、それはまた、私はMAXとVALUEパラメータのダミー数値に入れ替えるときゲージ自体は完全に正常に動作することを言及する価値があるかもしれJSONファイル

{"EBOGoal":1000,"EBOCurrent":900,"DEFGoal":2000,"DEFCurrent":1500,"LegalGoal":500,"LegalCurrent":450} 

ですゲージ用のjsコードの

Answer 1

変数の宣言問題とタイミングの問題があります。変数をonreadystatechange関数スコープの外に移動して問題を解決しても、データが非同期に読み込まれ、残りのコードが同期処理されるため、コードが壊れます。私はあなたが関数にあなたのJustGage初期化を移動し、あなたのfeeDataが利用可能な場合、その関数を呼び出すのいずれかをお勧め：

xhttp.onreadystatechange = function() { 
    var feeData = JSON.parse(this.responseText); 
    if (this.readyState == 4 && this.status == 200) { 
    // call your function with the data 
    setupJustGage(JSON.parse(this.responseText)); 
    } 
}; 

function setupJustGage(feeData) { 
    ... 
    var g = new JustGage({ 
     titleFontColor: "black", 
     labelFontColor: "black", 
     id: "DEF", 
     value: feeData.DEFCurrent, 
     pointer: true, 
     min: 0, 
     max: feeData.DEFGoal, 
     title: "DEF" 
    }); 
    var g = new JustGage({ 
     titleFontColor: "black", 
     labelFontColor: "black", 
     id: "EBO", 
     value: feeData.EBOCurrent, 
     pointer: true, 
     min: 0, 
     max: feeData.EBOGoal, 
     title: "EBO" 
    }); 
    ... 
} 

あなたはまたPromiseを返す関数であなたのXHRリクエストをラップし、セットアップの残りのコードを実行する可能性がありますthen：

function getData() { 
    return new Promise(function(resolve) { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      var feeData = JSON.parse(this.responseText); 
      if (this.readyState == 4 && this.status == 200) { 
      resolve(JSON.parse(this.responseText)); 
      } 
     }; 
     xhttp.open("GET", "test.json", true); 
     xhttp.send(); 
    }) 
} 

getData().then(function(feeData) { 
    var g = ... 
})