使用来自 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);

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