I need to transform data from server format to format for my UI library. But I can't completely understand how I should do this.
Name in new object is a field in object from server except "time" And add "time" value for each fields Need to transform this:
[
{
battery_charge: 0
battery_discharge: 0
consumption: 404
grid_backflow: 0
grid_consumption: 3
pv_generation: -7
time: "2019年02月25日T00:00:00+00:00"
}
{
battery_charge: 0
battery_discharge: 0
consumption: 404
grid_backflow: 0
grid_consumption: 3
pv_generation: -7
time: "2019年02月25日T10:00:00+00:00"
}
]
to this:
[
{
name: ‘Battery Charge’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Battery discharge’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Consumption’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Grid backflow’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Grid consumption’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
{
name: ‘Pv generation’
data: [
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
{ time: '2019-02-25T10:00:00+00:00', value: 3 }
]
}
]
-
please add your code. what goes wrong?Nina Scholz– Nina Scholz2021年11月17日 18:19:09 +00:00Commented Nov 17, 2021 at 18:19
-
I should mention that I didn't write the code because I don't understand how to do itOleh Strokan– Oleh Strokan2021年11月17日 18:24:19 +00:00Commented Nov 17, 2021 at 18:24
-
@OlehStrokan check my answerprogramoholic– programoholic2021年11月17日 18:39:07 +00:00Commented Nov 17, 2021 at 18:39
-
@programoholic thank you!Oleh Strokan– Oleh Strokan2021年11月17日 20:24:45 +00:00Commented Nov 17, 2021 at 20:24
-
@OlehStrokan accept if it worked :)programoholic– programoholic2021年11月17日 20:25:42 +00:00Commented Nov 17, 2021 at 20:25
4 Answers 4
Here is the simple way to achieve it :
const data = [
{
battery_charge: 0,
battery_discharge: 0,
consumption: 404,
grid_backflow: 0,
grid_consumption: 3,
pv_generation: -7,
time: '2019-02-25T00:00:00+00:00',
},
{
battery_charge: 0,
battery_discharge: 0,
consumption: 404,
grid_backflow: 0,
grid_consumption: 3,
pv_generation: -7,
time: '2019-02-25T10:00:00+00:00',
},
];
const IGNORE_KEY_MAP = {
time: 1,
};
function transformData(arr) {
if (arr.length == 0) return [];
let dataMap = new Map();
const keys = Object.keys(arr[0]);
arr.forEach((item) => {
for (let key of keys) {
if (!IGNORE_KEY_MAP[key]) {
let mapValue = dataMap.get(key);
if (mapValue) {
let newData = [...mapValue, getInsertableData(item, key)];
dataMap.set(key, newData);
} else {
dataMap.set(key, [getInsertableData(item, key)]);
}
}
}
});
let result = [];
dataMap.forEach((value, key) => {
const obj = {
name: key,
data: value,
};
result.push(obj);
});
return result;
}
function getInsertableData(data, key) {
return {
time: data.time,
value: data[key],
};
}
console.log(transformData(data))Interactive link : Link
answered Nov 17, 2021 at 18:35
programoholic
5,2545 gold badges26 silver badges63 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Oleh Strokan
Thanks for your short code example!
I would do this by first transforming into this format:
{
battery_charge: [
{time: "2019年02月25日T00:00:00+00:00", value: 0},
{time: "2019年02月25日T10:00:00+00:00", value: 0}
],
battery_discharge: [ /*...*/ ],
/* ... */
}
, which is a very common pattern and well-established. Then we can map the entries of this into your name / data format.
We do the first conversion with a double-reduce, and the whole thing might look like this:
const reformat = (data) =>
Object .entries (data .reduce (
(a, {time, ...rest}) => Object .entries (rest) .reduce (
(a, [key, value]) => ((a [key] = [... (a [key] || []), {time, value}]), a)
, a
), {}
)) .map (([name, data]) => ({name, data}))
const data = [{battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T00:00:00+00:00"}, {battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T10:00:00+00:00"}]
console .log (reformat (data)).as-console-wrapper {max-height: 100% !important; top: 0}
answered Nov 18, 2021 at 15:38
Scott Sauyet
50.9k5 gold badges57 silver badges111 bronze badges
1 Comment
Oleh Strokan
Tnank you a lot! This code much shorter what i already have!
Some simple code.
const
data = [{ battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T00:00:00+00:00" }, { battery_charge: 0, battery_discharge: 0, consumption: 404, grid_backflow: 0, grid_consumption: 3, pv_generation: -7, time: "2019-02-25T10:00:00+00:00" }],
result = Object.values(data.reduce((r, { time, ...o }) => {
Object
.entries(o)
.forEach(([name, value]) => (r[name] ??= { name, data: [] }).data.push({ time, value }));
return r;
}, {}));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }
answered Nov 17, 2021 at 18:40
Nina Scholz
388k26 gold badges367 silver badges417 bronze badges
3 Comments
Oleh Strokan
Thanks for your short code example. Just question: what does this operator mean: ??=. in .forEach line. I can't find this operator on internet
Nina Scholz
it is the logical nullish assignment
??= operator.Oleh Strokan
Thank you! Will go to documentation!)
var keys = {
battery_charge: "Battery Charge",
battery_discharge: "Battery discharge",
consumption: "Consumption",
grid_backflow: "Grid backflow",
grid_consumption: "Grid consumption",
pv_generation: "Pv generation",
};
var data = [
{
battery_charge: 0,
battery_discharge: 0,
consumption: 404,
grid_backflow: 0,
grid_consumption: 3,
pv_generation: -7,
time: "2019-02-25T00:00:00+00:00",
},
{
battery_charge: 0,
battery_discharge: 0,
consumption: 404,
grid_backflow: 0,
grid_consumption: 3,
pv_generation: -7,
time: "2019-02-25T10:00:00+00:00",
},
];
var formatted = [];
data.map((k) => {
Object.keys(keys).map((x) => {
if (!formatted.some((f) => f.key == x)) {
formatted.push({
title: keys[x],
key: x,
data: [],
});
}
if (
formatted.some(
(y) => y.data.some((f) => f.time == k.time) && y.key == x
)
) {
var index = formatted.findIndex(
(y) => y.data.some((f) => f.time == k.time) && y.key == x
);
var dataIndex = formatted[index].data.findIndex(
(f) => f.time == k.time
);
formatted[index].data[dataIndex].value += k[x];
} else {
var index = formatted.findIndex((k) => k.key == x);
formatted[index].data.push({ value: k[x], time: k.time });
}
});
});
console.log(formatted);1 Comment
Oleh Strokan
Thank you a lot!
lang-js