JavaScripts無法識別var持有解析JSON

Question

我想爲我們公司使用的各種R/Shiny儀表板的索引頁編碼一些儀表。該頁面只是一系列的div，其中有一些樣式可以導致這些各種R應用程序。

最近，我們的高管表達了很多興趣，看到頁面頂部的燃油表風格的圖表，表示每個部門的月收入和$目標。

我決定使用JustGage插件製作量表。我們使用腳本將csv的數據從csv中提取出來，我的主管將這些腳本放在一起，將這些數據轉儲到服務器上的JSON文檔中。我們正在討論一個包含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>

這裏的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" 
    }); 
    ... 
} 

你也可以換你XHR請求返回一個Promise的功能和運行您的設置代碼的其餘部分在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 = ... 
})