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

下面的单行代码将使用Array.prototype.map()，Object.entries()，String.prototype.split()，array destructuring和spread syntax来做到这一点：

const data = json.map(e => ([[k, v]] = Object.entries(e), [k, ...v.split(',')]));

这是完整的代码段：

const json = [{
    "value": "80,120"
  },
  {
    "value2": "117,120"
  },
  {
    "value3": "105,111"
  },
  {
    "value4": "40,77"
  },
  {
    "value5": "27,44"
  }];
  
const data = json.map(e => ([[k, v]] = Object.entries(e), [k, ...v.split(',')]));

console.log(data);

Answer 2

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

来自...

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

到...

['value', 80, 120],

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

Data column(s) for axis #0 cannot be of type string

您可以使用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图表的有效示例...

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>

Answer 3

您可以使用Array#map()，Object.keys()和Object.values()的组合，如下所示：

const data = json.map(function(a) {
  return [...Object.keys(a), ...Object.values(a)[0].split(",")];
});

演示：

const json = [{
    "value": "80,120"
  },
  {
    "value2": "117,120"
  },
  {
    "value3": "105,111"
  },
  {
    "value4": "40,77"
  },
  {
    "value5": "27,44"
  }
];

const data = json.map(function(a) {
  return [...Object.keys(a), ...Object.values(a)[0].split(",")]
});

console.log(data);

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

3 个答案: