根据数据点的键拆分 javascript 中的数组

Question

我正在做一个个人项目，我想显示我需要为其准备数据点的图表。我得到的回复是

{
  "size":[
    {
      "timestamp":"1641329889000",
      "size":12345,
      "fees":123456,
      "cost":168
    },
    {
      "timestamp":"1641387032",
      "size":456789,
      "fees":4567891,
      "cost":249
    },
    {
      "timestamp":"1641435786",
      "size":98765,
      "fees":987654,
      "cost":987
    },
  ]
}

我希望输出应该是这样的

{
  "size":{
    "timestamp": ["1641329889000","1641387032","1641435786"],
    "size": [12345,456789,98765],
    "fees": [123456,4567891,987654],
    "cost": [168,249,987]
  }
}

谁能帮我解决这个问题

Answer 1

let obj = {
  "size":[
    {
      "timestamp":"1641329889000",
      "size":12345,
      "fees":123456,
      "cost":168
    },
    {
      "timestamp":"1641387032",
      "size":456789,
      "fees":4567891,
      "cost":249
    },
    {
      "timestamp":"1641435786",
      "size":98765,
      "fees":987654,
      "cost":987
    },
  ]
}

let timestamps = [];
let sizes = [];
let fees = [];
let costs = [];

obj.size.foreach( ( data ) => {
   timestamps.push( data.timestamp );
   sizes.push( data.size);
   fees.push( data.fees );
   costs.push( data.cost );
}

let size = { timestamp: timestamps, size : sizes, fees : fees, cost : costs }

let outputObj = { size : size };

console.log( outputObj );

Answer 2

当然很简单。 :D

{
 "size":{
    "timestamp": size.map(item => item.timestamp),
    "size": size.map(item => item.size),
    "fees": size.map(item => item.fees),
    "cost": size.map(item => item.cost),
  }
}

Answer 3

使用 .reduce()，您可以使用没有任何硬编码数据点名称的通用函数。

const data={size:[{timestamp:"1641329889000",size:12345,fees:123456,cost:168},{timestamp:"1641387032",size:456789,fees:4567891,cost:249},{timestamp:"1641435786",size:98765,fees:987654,cost:987}]};

const result = data.size.reduce((acc, item) => {
  const keys = Object.keys(item);
  return keys.reduce((keyAcc, key) => ({
    ...keyAcc,
    [key]: acc[key] ? [...acc[key], item[key]] : [item[key]]
  }), {});
}, [])

console.log({ size: result});

Answer 4

将数组项合并到分组数组的对象中是一项经典的 reduce 任务，可以通过通用方式实现（与底层数据结构无关）。

以下实现还使用 Object.entries in order to access each entry's key-value pair directly. It also utilizes the Logical nullish assignment / ??= 运算符来访问或 create/assign 一行代码的数组。

function mergeAndCollectItemEntries(result, item) {
  Object
    // get an item's entry array.
    .entries(item)
    // for each key-value pair ...
    .forEach(([key, value]) => {

      // ... access and/or create a `key` specific array ...
      const groupList = (result[key] ??= []);

      // ... and push `value` into this array.
      groupList.push(value);
    });
  // return the programmatically aggregated merger result.
  return result
}

const sampleData = {
  "size": [{
    "timestamp": "1641329889000",
    "size": 12345,
    "fees": 123456,
    "cost": 168
  }, {
    "timestamp": "1641387032",
    "size": 456789,
    "fees": 4567891,
    "cost": 249
  }, {
    "timestamp": "1641435786",
    "size": 98765,
    "fees": 987654,
    "cost": 987
  }]
};

const mergedData = {
  size: sampleData.size.reduce(mergeAndCollectItemEntries, {})
};
console.log({
  sampleData,
  mergedData,
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

上面的 reducer 函数的实现方式可能略有不同，如下面的示例代码所示...

function mergeAndCollectItemEntries(result, item) {
  return Object
    .entries(item)
    .reduce((merger, [key, value]) => {

      (merger[key] ??= []).push(value);
      return merger;

    }, result);
}

const sampleData = {
  "size": [{
    "timestamp": "1641329889000",
    "size": 12345,
    "fees": 123456,
    "cost": 168
  }, {
    "timestamp": "1641387032",
    "size": 456789,
    "fees": 4567891,
    "cost": 249
  }, {
    "timestamp": "1641435786",
    "size": 98765,
    "fees": 987654,
    "cost": 987
  }]
};

const mergedData = {
  size: sampleData.size.reduce(mergeAndCollectItemEntries, {})
};
console.log({
  sampleData,
  mergedData,
});

.as-console-wrapper { min-height: 100%!important; top: 0; }

根据数据点的键拆分 javascript 中的数组

Split an array in javascript based on the key for dataPoints

javascript

arrays

reduce

split

reactjs