使用新键和结构的 api 数组重新映射对象

Question

我的返回对象有这样的输出：

{
 data:
  [
   {
    ts: "20-10-26",
    events: 1500,
   }, 
   {
    ts: "20-10-27",
    events: 1280,
   },
   {
    ts: "20-10-28",
    events: 1111,
   }
  ]   
}

我需要让它看起来像这样

[
  {
    id: "events",
    color: "hsl(331, 70%, 50%)",
    data: [
      {
        x: "20-10-26",
        y: 1500
      },
      {
        x: "20-10-27",
        y: 1280
      },
      {
        x: "20-10-28",
        y: 1111
      }
    ]
  }
]

所以我需要将键从 ts 和 events 更改为 x 和 y。还添加了两个带有静态数据 id 和颜色的字段。我使用来自https://nivo.rocks/line/ 的图表，他们需要这样格式化的数据。

Answer 1

将数据数组映射到具有指定键的新对象数组。

data.map(({ ts: x, events: y }) => ({ x, y }))

const responseData = {
 data:
  [
   {
    ts: "20-10-26",
    events: 1500,
   }, 
   {
    ts: "20-10-27",
    events: 1280,
   },
   {
    ts: "20-10-28",
    events: 1111,
   }
  ]   
};

const formattedData = {
  id: "events",
  color: "hsl(331, 70%, 50%)",
  data: responseData.data.map(({ ts: x, events: y }) => ({ x, y })),
};

console.log(formattedData);

如果您的图形组件需要，请将格式化数据放入数组中。