使用来自 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);如果您的图形组件需要的话，请将格式化数据放入数组中。