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