How to create a combination of array is react js? - arrays

Question

I need to create a combination of arrays.
I have the data like this and I need to arrange the data for the chart series
[
{
"movingDuration":10,
"parkedDuration":15,
},
{
"movingDuration":15,
"parkedDuration":23,
},
{
"movingDuration":43,
"parkedDuration":26,
},
{
"movingDuration":67,
"parkedDuration":21,
},
{
"movingDuration":47,
"parkedDuration":54,
}
]
and I expected a result like this the following method
[
{
"name":"Moving Duration",
"data":[
10,
15,
43,
67,
47
]
},
{
"name":"Parked Duration",
"data":[
15,
23,
26,
21,
54
]
}
]
Any help would be appreciated. thank you

Answer 1

Run the data through an array reduce to group by property key, then map it to the resultant object format you want.
const formattedData = data.reduce((data, current) => {
Object.entries(current).forEach(([key, value]) => {
data[key] = [...(data[key] ?? []), value];
});
return data;
}, {});
const finalData = Object.entries(formattedData).map(([name, data]) => ({
name,
data
}));
const data = [
{
movingDuration: 10,
parkedDuration: 15
},
{
movingDuration: 15,
parkedDuration: 23
},
{
movingDuration: 43,
parkedDuration: 26
},
{
movingDuration: 67,
parkedDuration: 21
},
{
movingDuration: 47,
parkedDuration: 54
}
];
const formattedData = data.reduce((data, current) => {
Object.entries(current).forEach(([key, value]) => {
data[key] = [...(data[key] ?? []), value];
});
return data;
}, {});
const finalData = Object.entries(formattedData).map(([name, data]) => ({
name,
data
}));
console.log(finalData);

Answer 2

Does this help?
const arr = [
{
movingDuration: 10,
parkedDuration: 15
},
{
movingDuration: 15,
parkedDuration: 23
},
{
movingDuration: 43,
parkedDuration: 26
},
{
movingDuration: 67,
parkedDuration: 21
},
{
movingDuration: 47,
parkedDuration: 54
}
];
const resultArray = [{ name: 'Moving Duration', data: [] }, { name: 'Parked Duration', data: [] }];
arr.forEach((ele) => {
resultArray[0].data.push(ele.movingDuration);
resultArray[1].data.push(ele.parkedDuration);
});

Answer 3

Let me know if this helps.
const origData=[
{
"movingDuration":10,
"parkedDuration":15,
},
{
"movingDuration":15,
"parkedDuration":23,
},
{
"movingDuration":43,
"parkedDuration":26,
},
{
"movingDuration":67,
"parkedDuration":21,
},
{
"movingDuration":47,
"parkedDuration":54,
}
]
const cols=Object.keys(origData[0])
const result=cols.map(item=>{
const data=origData.map(i=>i[item])
return {name:item,data}
})
console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

let data = [
{
"movingDuration":10,
"parkedDuration":15,
},
{
"movingDuration":15,
"parkedDuration":23,
},
{
"movingDuration":43,
"parkedDuration":26,
},
{
"movingDuration":67,
"parkedDuration":21,
},
{
"movingDuration":47,
"parkedDuration":54,
}
]
let sol = {}
data.forEach(d => {
let keys = Object.keys(d);
if(sol[keys[0]]){
sol[keys[0]] = [...sol[keys[0]], d[keys[0]]]
sol[keys[1]] = [...sol[keys[1]], d[keys[1]]]
}else{
sol[keys[0]] = [].concat(d[keys[0]])
sol[keys[1]] = [].concat(d[keys[1]])
}
})
let final = Object.keys(sol).map(key =>{
let temp = {}
temp["name"] = key
temp["data"] = sol[key]
return temp
})
console.log(final)

Answer 5

We can use reduce() method to create an object with Object.values() to get values from object:
const result = data.reduce((a, c) => {
for (const key in c) {
a[key] = a[key] || {name: key, data: []};
a[key].data.push(c[key]);
}
return a;
}, {})
console.log(Object.values(result));
An example:
let data = [
{
"movingDuration":10,
"parkedDuration":15,
},
{
"movingDuration":15,
"parkedDuration":23,
},
{
"movingDuration":43,
"parkedDuration":26,
},
{
"movingDuration":67,
"parkedDuration":21,
},
{
"movingDuration":47,
"parkedDuration":54,
}
]
const result = data.reduce((a, c) => {
for (const key in c) {
a[key] = a[key] || {name: key, data: []};
a[key].data.push(c[key]);
}
return a;
}, {})
console.log(Object.values(result));