将对象数组映射到新组中

问题描述

我有一个对象，其中包含从 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"
      },]

解决方法

使用 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)