如何将表格行数据转换为 javascript 中的列数据

Question

所以我需要将包含表格行数据的数组转换为特定格式的列数据，以便我可以使用它来显示带有 Recharts 的图表。

我的数据格式如下：

rows = [
    ['Year', '2010', '2011', '2012', '2013'], 
    ['wages','2000','2000','2050','2050'], 
    ['purchase cost', '4000', '4300', '4500', '5000']
]

我需要将数据格式化如下：

columns = [
    {'Year' : '2010', 'wages' : '2000', 'purchase cost' : '4000'}, 
    {'Year' : '2011', 'wages' : '2000', 'purchase cost' : '4300'}, 
    {'Year' : '2012', 'wages' : '2050', 'purchase cost' : '4500'}, 
    {'Year' : '2013', 'wages' : '2050', 'purchase cost' : '5000'}
]

我已经接近获得我需要的结果，但似乎无法让它工作，所以我将不胜感激任何帮助！

Answer 1

遵守两个原则

子数组的长度都相同。
子数组的第一个元素是列名。

我是分几步实现的，你可以参考下面的代码

const rows = [
  ['Year', '2010', '2011', '2012', '2013'],
  ['wages', '2000', '2000', '2050', '2050'],
  ['purchase cost', '4000', '4300', '4500', '5000']
];

const property = rows.map(row => row[0]);
const columns = rows.map(row => {
  row.shift();
  return row
});

const data = columns.map((column, i) => {
  return column.map(col => {
    const obj = {};
    obj[property[i]] = col;
    return obj;
  });
});

const result = new Array(columns[0].length);
for (let i = 0; i < result.length; i++) {
  const obj = {};
  for (let j = 0; j < property.length; j++) {
    for (const [key, value] of Object.entries(data[j][i])) {
      obj[key] = value;
    }
  }
  result[i] = obj;
}

console.log(result);

如何将表格行数据转换为 javascript 中的列数据

How can I convert tabular row data to column data in javascript

javascript

arrays

javascript-objects

recharts