为React-table转换长格式的JavaScript对象数组

Question

如何将宽格式对象数组转换为长格式

输入数组:

[
{
series: "opening_balance",
"Oct 2021": 12713238.3,
"Nov 2021": 27713238.3,
"Dec 2021": 22713238.3,
},
{
series: "inflow",
"Oct 2021": 7,
"Nov 2021": 40000000,
"Dec 2021": 50000000,
}
];

输出数组:

[
{ year_month: "Oct 2021", opening_balance: 5, inflow: 100 },
{ year_month: "Nov 2021", opening_balance: 10, inflow: 200 },
{ year_month: "Dec 2021", opening_balance: 15, inflow: 150 },
];

输出也是来自API调用的原始数据。它被转换成一个用于React-table的宽格式，并且它工作了。

但是，表格单元格现在是可编辑的，它需要更新另一个组件中的源数据;因此,需要原始格式。

我尝试了多种方法，但都没有成功。下面是不能工作的代码

let data = [
{
series: "opening_balance",
"Oct 2021": 5,
"Nov 2021": 10,
"Dec 2021": 15,
},
{
series: "inflow",
"Oct 2021": 100,
"Nov 2021": 200,
"Dec 2021": 150,
},
];
let results = data.map((row) => {
let keys = Object.keys(row);
let x = keys.map((key) => {
return { year_month: key, value: row[key] };
});
return [...x];
});
console.log("results:", results);

生产

results: [
[
{ year_month: 'series', value: 'opening_balance' },
{ year_month: 'Oct 2021', value: 5 },
{ year_month: 'Nov 2021', value: 10 },
{ year_month: 'Dec 2021', value: 15 }
],
[
{ year_month: 'series', value: 'inflow' },
{ year_month: 'Oct 2021', value: 100 },
{ year_month: 'Nov 2021', value: 200 },
{ year_month: 'Dec 2021', value: 150 }
]
]

有人可以帮助转换数据吗?

Answer 1

我给你的建议是在后端进行转换，可能是在数据库层或API层。

虽然转换可以像这样艰难地完成:https://stackblitz.com/edit/node-8u47y6?file=index.js

const arr = [
{
series: 'opening_balance',
'Oct 2021': 12713238.3,
'Nov 2021': 27713238.3,
'Dec 2021': 22713238.3,
},
{
series: 'inflow',
'Oct 2021': 7,
'Nov 2021': 40000000,
'Dec 2021': 50000000,
},
{
series: 'customXYZ',
'Oct 2021': 1,
'Nov 2021': 2,
'Dec 2021': 3,
},
];
const hashMap = {};
// Creating the hashmap for each year_month
arr.forEach((obj) => {
const series = obj.series;
Object.entries(obj).forEach(([key, value]) => {
if (key !== 'series') {
if (!hashMap[key]) {
hashMap[key] = {};
}
hashMap[key][series] = value;
}
});
});
// transforming the same to array like values
const result = Object.entries(hashMap).map(([key, value]) => ({
year_month: key,
...value,
}));
console.log(result);