Transform data in array

Question

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: see stackoverflow.com/help/how-to-ask & meta.stackoverflow.com/questions/261592/…
• Community: Please provide enough code so others can better understand or reproduce the problem.

Answer 1

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;
 }, {});
}

Answer 2

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 }

• Oleh Strokan: Thank you a lot! I used exactly your code!)

Answer 3

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)

Answer 4

Using reduce and map.

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

Answer 5

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