javascript - 将具有子数组的对象数组映射并减少到具有父 id 的子数组

Question

我正在尝试获取像这样的对象数组

[
  {
    "id": "uniqueParentId1",
    "children": [
      {
        "childProp1": "test1",
        "childProp2": "test3"
      }
    ]
  },
  {
    "id": "uniqueParentId2",
    "children": [
      {
        "childProp1": "somevals",
        "childProp2": "other vals"
      },
      {
        "childProp1": "somevals 1",
        "childProp2": "other vals 1"
      }
    ]
  }
]

并返回所有子对象的组合数组，每个子对象都有一个附加值，即父对象的“id”。

上面的例子，结果。

[
  {
    "parentId": "uniqueParentId1",
    "childProp1": "test1",
    "childProp2": "test3"
  },
  {
    "parentId": "uniqueParentId2",
    "childProp1": "somevals",
    "childProp2": "other vals"
  }
  {
    "parentId": "uniqueParentId2",
    "childProp1": "somevals 1",
    "childProp2": "other vals 1"
  }
]

我只是不确定如何处理这个问题。我熟悉扁平化和数组数组。但是我只能在不添加 parentId 的情况下将输出作为原始子项的数组

Answer 1

应该这样做:

var values = [{
    "id": "uniqueParentId1",
    "children": [{
      "childProp1": "test1",
      "childProp2": "test3"
    }]
  },
  {
    "id": "uniqueParentId2",
    "children": [{
        "childProp1": "somevals",
        "childProp2": "other vals"
      },
      {
        "childProp1": "somevals 1",
        "childProp2": "other vals 1"
      }
    ]
  }
];

var result = values.map(value =>
  value.children.map(child => ({ parentId: value.id, ...child }))
).flat();

console.log(result);

代码分解:

child => ({ parentId: value.id , ...child })

接受一个对象并返回一个新对象，该对象具有 parentId 属性和 child 中的所有属性。

输入:

{
    "childProp1": "somevals",
    "childProp2": "other vals"
}

输出:

{
    "parentId": "uniqueParentId2"
    "childProp1": "somevals",
    "childProp2": "other vals"
}

下一个函数:

value =>
    value.children.map(child => ({ parentId: value.id, ...child }))

获取一个名为value 的对象，将上面的函数应用于value.children 中的每个数组元素，并返回一个结果数组。

下一步:

values.map(.....)

将上述函数应用于 values 中的每个元素并返回结果数组。

此时，此 .map() 调用的结果是一个如下所示的数组，原始数组的每个元素都有一个元素:

[
  [
    {
      "parentId": "uniqueParentId1",
      "childProp1": "test1",
      "childProp2": "test3"
    }
  ],
  [
    {
      "parentId": "uniqueParentId2",
      "childProp1": "somevals",
      "childProp2": "other vals"
    },
    {
      "parentId": "uniqueParentId2",
      "childProp1": "somevals 1",
      "childProp2": "other vals 1"
    }
  ]
]

所以我们做的最后一件事是用 .flat() 展平这个数组。