在JSON中引用Javascript变量

Question

我正试图用Javascript引用用户输入的数据。变量是以JSON的形式传递进来的，我需要提取一个值，并在另一个JSON中引用这个值，用Chart JS创建一个图表。行标签是我尝试过的，但似乎并不奏效。我试图尽可能地避免重构。有什么建议吗？

{
  "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. 将标签字符串解析为一个 JSON 再用 JSON.parse.

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提到的，标签需要是一个数组，因此将单引号替换为双引号，解析两次后返回一个对象。这样就成功了! 真的很感谢你的帮助。