javascript - 如何将 JSON 结构转换为数组的数组？

Question

我有一个像下面这样的 json 响应，

[  
 {  
   "Value":"80,120"
 },
 {  
   "value2":"117,120"
 },
 {  
   "value3":"105,111"
 },
 {  
   "value4":"40,77"
 },
 {  
   "value5":"27,44"
 }
]

如何将这个json结构形成一个表格来动态绘制条形图？现在我在这里静态提及这些值。

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['value', '80', '120'],
    ['value1', '70', '300'],
    ['value2', '90', '400'],
    ['value3', '100', '230']
  ]);

Answer 1

如果您打算使用该数据绘制谷歌图表，
您需要将值从字符串转换为数字。

来自...

['value', '80', '120'],

到...

['value', 80, 120],

否则，您将收到以下错误...

轴 #0 的数据列不能是字符串类型

<小时/>

您可以使用 map 方法，如其他答案中的建议，
使用 parseFloat 或 parseInt 将字符串转换为数字。

以下内容将起作用...

    var dataObj = [
      {
        "Value":"80,120"
      },
      {
        "value2":"117,120"
      },
      {
        "value3":"105,111"
      },
      {
        "value4":"40,77"
      },
      {
        "value5":"27,44"
      }
    ];

    var dataArray = dataObj.map(function (row) {
      var keys = Object.keys(row);
      var values = row[keys[0]].split(',');
      return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
    });

    console.log(JSON.stringify(dataArray));

<小时/>

此外，由于数组数据不包含列标题，
您需要使用 true 作为 arrayToDataTable 中的“第一行是数据”参数，
这是第二个参数...

var data = google.visualization.arrayToDataTable(dataArray, true);

以下是使用谷歌图表的工作示例...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataObj = [
    {
      "Value":"80,120"
    },
    {
      "value2":"117,120"
    },
    {
      "value3":"105,111"
    },
    {
      "value4":"40,77"
    },
    {
      "value5":"27,44"
    }
  ];

  var dataArray = dataObj.map(function (row) {
    var keys = Object.keys(row);
    var values = row[keys[0]].split(',');
    return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
  });

  var data = google.visualization.arrayToDataTable(dataArray, true);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>