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}
]
]
Mister Jojo
23k6 gold badges28 silver badges45 bronze badges
-
1see stackoverflow.com/help/how-to-ask & meta.stackoverflow.com/questions/261592/…Mister Jojo– Mister Jojo2021年09月25日 15:40:17 +00:00Commented Sep 25, 2021 at 15:40
-
Please provide enough code so others can better understand or reproduce the problem.Community– Community Bot2021年10月03日 19:04:48 +00:00Commented Oct 3, 2021 at 19:04
5 Answers 5
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;
}, {});
}
answered Sep 25, 2021 at 15:53
Tuan Dao
2,8151 gold badge14 silver badges21 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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 }
answered Sep 25, 2021 at 16:17
Mister Jojo
23k6 gold badges28 silver badges45 bronze badges
1 Comment
Oleh Strokan
Thank you a lot! I used exactly your code!)
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)
answered Sep 25, 2021 at 16:06
Spectric
32.6k6 gold badges32 silver badges56 bronze badges
Comments
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);
answered Sep 25, 2021 at 17:40
navnath
3,7241 gold badge13 silver badges20 bronze badges
Comments
Here is a very simple "do it yourself" version that will work with older versions of JavaScript and people. It takes your original data (arr) and clones each item before using it to help create a temp object which contains all of your data using the ID as a key. The 2nd function converts that back to the array you wanted. I've added the call to keep it clear.
function transformArrayToObject() {
var obj = {};
for (var i in arr) {
// clone to preserve the original
var tmp = JSON.parse(JSON.stringify(arr[i]));
// "id" is the key for the temp object
var key = tmp.id;
// create the object if needed
if (!obj[key]) {
obj[key] = {id: key, data: []};
}
// remove the id before adding the object
delete tmp.id;
// add the data to the object
obj[key].data.push(tmp);
}
return obj;
}
function transformObjectToArray(obj) {
var ret = [];
for (var i in obj) {
ret.push(obj[i]);
}
return ret;
}
var newArr = transformObjectToArray(transformArrayToObject());
console.log(newArr);
answered Sep 25, 2021 at 19:19
Chris Sharp
1,9951 gold badge21 silver badges32 bronze badges
Comments
Explore related questions
See similar questions with these tags.
lang-js