gpt4 book ai didi

JavaScript 无法识别持有已解析 JSON 的 var

转载 作者:行者123 更新时间:2023-11-29 21:02:16 30 4
gpt4 key购买 nike

我正在尝试为我们公司使用的各种 R/Shiny 仪表板的索引页编写一些仪表。该页面只是一系列带有一些样式的 div,这些样式导致各种 R 应用程序。

最近,我们的高管表示非常有兴趣在页面顶部看到电量计样式的图表,表示每个部门当月的收入和目标。

我决定使用 JustGage制作仪表的插件。我们正在使用我的主管拼凑的脚本从 csv 中获取数据,以将该数据转储到服务器上的 JSON 文档中。我们正在谈论一个包含 6 行的 JSON 文件。非常简单。

我正在使用 AJAX XMLHttpRequest,这似乎有效。但是,当我将解析后的数据存储到一个变量中,然后在我的 Gauge 参数中引用它时,我得到:

(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 代码的 MAX 和 VALUE 参数交换虚拟数值时,仪表本身工作得非常好。

最佳答案

您有一个变量声明问题,还有一个时间问题。即使您通过将变量移出 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 = ...
})

关于JavaScript 无法识别持有已解析 JSON 的 var,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45926519/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com