I need to transform data from first format to second for my ui library. But I can't completely understand how I should do this. I need to add arrays "data" each id
My data:
[
{id: 'Battery charging', time: '2021-0903T14:10:00Z', value: 3890.019022727273, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:15:00Z', value: 3594.3097145454544, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:20:00Z', value: 4069.6454163636363, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:25:00Z', value: 4090.7089309090907, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:30:00Z', value: 3530.3841, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:35:00Z', value: 4154.7032509090905, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:40:00Z', value: 4752.12578, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:45:00Z', value: 5906.133650000001, table: 0}
{id: 'Battery charging', time: '2021-09-03T14:50:00Z', value: 4148.342200000001, table: 0}
{id: 'Battery discharging', time: '2021-09-03T14:10:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:15:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:20:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:25:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:30:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:35:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:40:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:45:00Z', value: 0, table: 1}
{id: 'Battery discharging', time: '2021-09-03T14:50:00Z', value: 45.93099, table: 1}
]
Need to transform to this:
[
{id: 'Battery charging',
data: [
{time: '2021-09-03T14:10:00Z', value: 3890.019022727273}
{time: '2021-09-03T14:15:00Z', value: 3594.3097145454544}
{time: '2021-09-03T14:20:00Z', value: 4069.6454163636363}
{time: '2021-09-03T14:25:00Z', value: 4090.7089309090907}
{time: '2021-09-03T14:30:00Z', value: 3530.3841}
{time: '2021-09-03T14:35:00Z', value: 4154.7032509090905}
{time: '2021-09-03T14:40:00Z', value: 4752.12578}
{time: '2021-09-03T14:45:00Z', value: 5906.133650000001}
{time: '2021-09-03T14:50:00Z', value: 4148.342200000001}
]
{id: 'Battery discharging',
data: [
{time: '2021-09-03T14:10:00Z', value: 0}
{
time: '2021-09-03T14:15:00Z', value: 0}
{
time: '2021-09-03T14:20:00Z', value: 0}
{time: '2021-09-03T14:25:00Z', value: 0}
{time: '2021-09-03T14:30:00Z', value: 0}
{
time: '2021-09-03T14:35:00Z', value: 0}
{
time: '2021-09-03T14:40:00Z', value: 0}
{
time: '2021-09-03T14:45:00Z', value: 0}
{time: '2021-09-03T14:50:00Z', value: 45.93099}
]
]
CodePudding user response：
You can try to use a version of groupBy by vanilla JS. Then you can restrict it with Array.map to filter the time and value in child.
You can check the below demo:
const input = [{id: 'Battery charging', time: '2021-0903T14:10:00Z', value: 3890.019022727273, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:15:00Z', value: 3594.3097145454544, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:20:00Z', value: 4069.6454163636363, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:25:00Z', value: 4090.7089309090907, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:30:00Z', value: 3530.3841, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:35:00Z', value: 4154.7032509090905, table: 0},
,{id: 'Battery charging', time: '2021-09-03T14:40:00Z', value: 4752.12578, table: 0},
{id: 'Battery charging', time: '2021-09-03T14:45:00Z', value: 5906.133650000001, table: 0},
,{id: 'Battery charging', time: '2021-09-03T14:50:00Z', value: 4148.342200000001, table: 0},
{id: 'Battery discharging', time: '2021-09-03T14:10:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:15:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:20:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:25:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:30:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:35:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:40:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:45:00Z', value: 0, table: 1},
{id: 'Battery discharging', time: '2021-09-03T14:50:00Z', value: 45.93099, table: 1}];
var groupedData = groupBy(input, 'id');
var result = [];
for (const item in groupedData) {
result.push({
id: item,
data: groupedData[item].map(obj => {
let rObj = {}
rObj['time'] = obj.time;
rObj['value'] = obj.value;
return rObj
})
});
}
console.log(result);
function groupBy(arr, criteria) {
return arr.reduce(function(obj, item) {
// Check if the criteria is a function to run on the item or a property of it
let key = typeof criteria === 'function' ? criteria(item) : item[criteria];
// If the key doesn't exist yet, create it
if (!Object.prototype.hasOwnProperty.call(obj, key)) {
obj[key] = [];
}
// Push the value to the object
obj[key].push(item);
// Return the object to the next item in the loop
return obj;
}, {});
}CodePudding user response：
Here's an Array.reduce solution that checks whether the previous value (an array) contains an item with the same id property as the current item (with Array.find), and if so, pushes the current item's data to that item's data property. Otherwise, we construct the corresponding object and push it to the previous value.
const arr=[{id:"Battery charging",time:"2021-0903T14:10:00Z",value:3890.019022727273,table:0},{id:"Battery charging",time:"2021-09-03T14:15:00Z",value:3594.3097145454544,table:0},{id:"Battery charging",time:"2021-09-03T14:20:00Z",value:4069.6454163636363,table:0},{id:"Battery charging",time:"2021-09-03T14:25:00Z",value:4090.7089309090907,table:0},{id:"Battery charging",time:"2021-09-03T14:30:00Z",value:3530.3841,table:0},{id:"Battery charging",time:"2021-09-03T14:35:00Z",value:4154.7032509090905,table:0},,{id:"Battery charging",time:"2021-09-03T14:40:00Z",value:4752.12578,table:0},{id:"Battery charging",time:"2021-09-03T14:45:00Z",value:5906.133650000001,table:0},,{id:"Battery charging",time:"2021-09-03T14:50:00Z",value:4148.342200000001,table:0},{id:"Battery discharging",time:"2021-09-03T14:10:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:15:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:20:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:25:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:30:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:35:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:40:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:45:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:50:00Z",value:45.93099,table:1}];
const result = arr.reduce((a, b) => {
const [found, converted] = [a.find(e => e.id == b.id), {time: b.time, value: b.value}];
if (found) {
found.data.push(converted)
} else {
a.push({id: b.id, data: [converted]})
}
return a;
}, [])
console.log(result)CodePudding user response：
this way...
const data=[{id:"Battery charging",time:"2021-0903T14:10:00Z",value:3890.019022727273,table:0},{id:"Battery charging",time:"2021-09-03T14:15:00Z",value:3594.3097145454544,table:0},{id:"Battery charging",time:"2021-09-03T14:20:00Z",value:4069.6454163636363,table:0},{id:"Battery charging",time:"2021-09-03T14:25:00Z",value:4090.7089309090907,table:0},{id:"Battery charging",time:"2021-09-03T14:30:00Z",value:3530.3841,table:0},{id:"Battery charging",time:"2021-09-03T14:35:00Z",value:4154.7032509090905,table:0},,{id:"Battery charging",time:"2021-09-03T14:40:00Z",value:4752.12578,table:0},{id:"Battery charging",time:"2021-09-03T14:45:00Z",value:5906.133650000001,table:0},,{id:"Battery charging",time:"2021-09-03T14:50:00Z",value:4148.342200000001,table:0},{id:"Battery discharging",time:"2021-09-03T14:10:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:15:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:20:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:25:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:30:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:35:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:40:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:45:00Z",value:0,table:1},{id:"Battery discharging",time:"2021-09-03T14:50:00Z",value:45.93099,table:1}];
const res = Object.entries(data.reduce((r,{id,time,value})=>
{
r[id] = r[id] ?? []
r[id].push({time,value})
return r
},{})).map(([k,v])=>({id:k,data:v}))
console.log( res ).as-console-wrapper { max-height: 100% !important; top: 0 }CodePudding user response：
You could do this in one line and O(n) using Object.entries and Array#reduce.
const data = [ { id: 'Battery charging', time: '2021-0903T14:10:00Z', value: 3890.019022727273, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:15:00Z', value: 3594.3097145454544, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:20:00Z', value: 4069.6454163636363, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:25:00Z', value: 4090.7089309090907, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:30:00Z', value: 3530.3841, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:35:00Z', value: 4154.7032509090905, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:40:00Z', value: 4752.12578, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:45:00Z', value: 5906.133650000001, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:50:00Z', value: 4148.342200000001, table: 0, }, { id: 'Battery discharging', time: '2021-09-03T14:10:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:15:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:20:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:25:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:30:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:35:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:40:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:45:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:50:00Z', value: 45.93099, table: 1, }, ];
let res = Object.entries(data.reduce((a, o) => (a[(id = o.id) && delete o.id && delete o.table && id] ? a[id].push(o) : (a[id] = [o])) && a, {})).map(([id, data]) => ({ id, data }));
console.log(res);CodePudding user response：
Create an object by id (key) and its value as a data array.
If already object by id exists just copy previous data and add current data.
If an object with id does not present then add a new object with data as an array holding just the current object
const data = [ { id: 'Battery charging', time: '2021-0903T14:10:00Z', value: 3890.019022727273, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:15:00Z', value: 3594.3097145454544, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:20:00Z', value: 4069.6454163636363, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:25:00Z', value: 4090.7089309090907, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:30:00Z', value: 3530.3841, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:35:00Z', value: 4154.7032509090905, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:40:00Z', value: 4752.12578, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:45:00Z', value: 5906.133650000001, table: 0, }, { id: 'Battery charging', time: '2021-09-03T14:50:00Z', value: 4148.342200000001, table: 0, }, { id: 'Battery discharging', time: '2021-09-03T14:10:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:15:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:20:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:25:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:30:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:35:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:40:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:45:00Z', value: 0, table: 1, }, { id: 'Battery discharging', time: '2021-09-03T14:50:00Z', value: 45.93099, table: 1, }, ];
const byId = data.reduce((acc, { id, time, value }) => {
acc[id] = acc[id] ?
{ data: [...acc[id].data, { time, value } ]}
:
{ data: [{ time, value }] };
return acc;
}, {});
// wrap id into object
const result = Object.keys(byId).map(id => ({ id, ...byId[id]}));
console.log(result);