转换数组中的数据

Transform data in array

我需要将 ui 库的数据从第一种格式转换为第二种格式。但我不能完全理解我应该怎么做。我需要为每个 id

添加数组“数据”

我的数据:

[
{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}

]

需要转换成这样:

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

您可以尝试使用 groupBy by vanilla JS. Then you can restrict it with Array.map 的版本来过滤 child 中的 timevalue

您可以查看以下演示:

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;

  }, {});
}

这是一个 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),如果是,则将当前项目的数据推送到该项目的 data 属性。否则,我们构造对应的对象,并将其压入之前的值。

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)

这样...

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 }

使用 reduce and map.

通过 id(键)及其值作为数据数组创建一个对象。

如果 id 对象已经存在,只需复制以前的数据并添加当前数据。

如果不存在具有 id 的对象,则添加一个新对象,其数据作为仅包含当前对象的数组

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

这是一个非常简单的“自己动手”版本,适用于旧版本的 JavaScript 和其他人。它获取您的原始数据 (arr) 并在使用它之前克隆每个项目,以帮助创建一个临时对象,该对象包含使用 ID 作为键的所有数据。第二个函数将其转换回您想要的数组。我添加了呼叫以保持清晰。

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