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

Question

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?

score 1 · Accepted Answer · answered Oct 06 '21 at 10:05

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

Thank you! It worked. The API is made by another team and usually in a simple long format. I can try to change the API itself instead of transforming the data in JavaScript. Also, if the react-table could take the data in simple data frame type or how the relational databases are saved would be helpful. — Rahulkg007, Oct 06 '21 at 10:25

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

1 Answers1