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

How to convert a wide-format array of objects into a long format

Input Array:

[
  {
    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,
  }
];

Output Array:

[
  { 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 },
];

The output was also the original data coming from the API call. It was transformed into a wide format to use for React-table, and it worked.

However, the table cells are editable now and it needs to update the source data in another component; and hence, need to get the original format.

I tried multiple ways but not able to succeed. Below is the code which is not working

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

produces

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 }
  ]
]

Could someone help to transform data?

CodePudding user response：

My suggestion to you would be to make the transformation on the backend may be at the database layer or the API layer.

Though the transformation can be done like this the hard way: 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);