在 JSON 中引用 Javascript 变量答案

【问题标题】：Reference Javascript variable in JSON在 JSON 中引用 Javascript 变量
【发布时间】：2020-05-20 16:21:26
【问题描述】：

我正在尝试从 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'
        }
      }]
    }
  }
});

【问题讨论】：

您的示例代码中没有 JSON。 JSON 是一种文本格式，例如 CSV。我在这里看到的只是对象和数组。
更新问题以添加 JSON
这也不是 JSON - 它有单引号，不会解析为 JSON。您能否给出您从开发者工具中看到的错误（如果有）？
JSON 是一个带有单引号的字符串。开发工具中没有错误。当我尝试动态引用标签时，chartjs 图表不显示

标签： javascript json parsing reference chart.js

【解决方案1】：

您的代码中有两个问题。

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

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

使用JSON.parse 解析输入字符串中的值并提取labels（这就是您已经做过的）。
得到的labels字符串中的replace所有单引号被双引号。
再次使用 JSON.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>

【讨论】：

【解决方案2】：

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

【讨论】：