在 JSON 中引用 Javascript 变量

Question

我正在尝试从Javascript中的用户输入中引用数据。该变量作为 JSON 传入，我需要提取一个值并在另一个使用 Chart JS 创建图表的 JSON 中引用该值。行标签是我尝试过的，但它似乎不起作用。我试图尽可能避免重构。有什么建议吗？

{
"labels": "['jan', 'Feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']"
}
var lineChart = document.getElementById('line-chart').getContext('2d');
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels,
datasets: [{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Processed",
borderColor: "#9C2AA0",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Error",
borderColor: "#123456",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Not Processed",
borderColor: "#A8B400",
fill: false
}
]
},
options: {
title: {
display: false,
text: '',
fontColor: '#000000',
fontFamily: 'Calibri',
fontSize: 30
},
legend: {
position: 'top',
labels: {
fontColor: '#000000',
fontFamily: 'Calibri',
boxWidth: 20,
fontSize: 20
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#000000'
}
}],
yAxes: [{
ticks: {
fontColor: '#000000'
}
}]
}
}
});

Answer 1

代码中有两个问题。

1. 正如其他人已经评论的那样，input元素中的数据不是有效的JSON格式
2. labels本身是一个字符串，因为它被双引号括起来

要使其正常工作，您可以执行以下步骤。

1. 使用JSON.parse解析输入字符串中的值并提取labels(这是您已经执行的操作(。
2. 将获取的labels字符串中的所有单引号替换为双引号。
3. 使用 AgainJSON.parse将标签字符串解析为JSON数组。

const labelsAsString =  JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels;
const labelsAsJSONString = labelsAsString.replace(/'/g,'"');
const labelsArray = JSON.parse(labelsAsJSONString);

请查看下面的修订代码，看看它是如何工作的。

const labelsAsString =  JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels;
const labelsAsJSONString = labelsAsString.replace(/'/g,'"');
const labelsArray = JSON.parse(labelsAsJSONString);
new Chart('line-chart', {
type: 'line',
data: {
labels: labelsArray,
datasets: [{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Processed",
borderColor: "#9C2AA0",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Error",
borderColor: "#123456",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Not Processed",
borderColor: "#A8B400",
fill: false
}
]
},
options: {
title: {
display: false,
text: '',
fontColor: '#000000',
fontFamily: 'Calibri',
fontSize: 30
},
legend: {
position: 'top',
labels: {
fontColor: '#000000',
fontFamily: 'Calibri',
boxWidth: 20,
fontSize: 20
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#000000'
}
}],
yAxes: [{
ticks: {
fontColor: '#000000'
}
}]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<input id="ctl00_ctl00_cphMain_cphMacTool_DASHBOARD" value="{ &quot;labels&quot;: &quot;['jan', 'Feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']&quot; }">
<canvas id="line-chart" height="80"></canvas>

Answer 2

我发布的 JSON 是有效的，但在解析时返回了一个字符串。正如uminder所提到的，标签需要是一个数组，因此用双引号替换单引号并解析两次返回一个对象。这奏效了！非常感谢您的帮助。