将对象数组映射到新组中

Question

我有一个对象，其中包含从 API 返回的两个对象数组。我需要尝试将其映射到一个新的对象数组中，以便可以对 Vue v-select 组件的数据进行分组。 CodePen Example

fields: {
      current: [
        {
          name: 'Date'
        },
        {
          name: 'Time'
        }
      ],
      previous: [
        {
          name: 'Birthday'
        },
        {
          name: 'Comments'
        }
      ]
    },

我怎样才能将它映射到一个看起来像这样的新对象数组中？

grouped: [
      {
        group: "Current",
      },
      {
        name: "Date"
      },
      {
        name: "Time"
      },
      {
        group: "Previous"
      },
      {
        name: "Birthday"
      },
      {
        name: "Comments"
      },
    ]

Answer 1

使用Object.entries() 获取组及其值，并使用Array.flatMap() 映射它们。创建组的对象，并将其添加到包含组项的数组中。

const flattenGroups = fields =>
  Object.entries(fields)
    .flatMap(([group, items]) => [{ group }, ...items])

const fields = {"current":[{"name":"Date"},{"name":"Time"}],"previous":[{"name":"Birthday"},{"name":"Comments"}]}

const result = flattenGroups(fields)

console.log(result)