Как преобразовать структуру JSON в массив массивов?

Question

У меня есть ответ json, такой как follow,

[  
 {  
   "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#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);

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.prototype.map(), Object.entries(), String.prototype.split(), деструктурирование массива и синтаксис распространения :

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);