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} ]
]

see stackoverflow.com/help/how-to-ask & meta.stackoverflow.com/questions/261592/… — Mister Jojo
– Mister Jojo, Commented Sep 25, 2021 at 15:40
Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Oct 3, 2021 at 19:04

Tuan Dao · Accepted Answer · 2021-09-25 16:01:35Z

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;

  }, {});
}

Mister Jojo · Accepted Answer · 2021-09-25 16:17:56Z

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 }

Spectric · Accepted Answer · 2021-09-25 16:06:17Z

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)

navnath · Accepted Answer · 2021-09-25 17:40:35Z

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

Chris Sharp · Accepted Answer · 2021-09-25 19:19:52Z

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

Collectives™ on Stack Overflow

Transform data in array

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related