为 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 的宽格式，并且有效。

但是，table单元格现在是editable，需要更新另一个组件中的源数据；因此，需要获取原始格式。

我尝试了多种方法但未能成功。下面是不起作用的代码

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

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

Transform JavaScript array of object in long format for React-table

javascript

arrays

react-table-v7