映射并缩小具有子对象数组的对象数组，直至具有父级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 => Object.assign({ parentId: value.id }, child))
).reduce((l, n) => l.concat(n), []);

console.log(result);

代码明细：

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

取得一个对象并返回该对象的副本，其中parentId添加了属性。value.id使用value函数外部的闭包变量。

输入：

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

输出：

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

下一个功能：

value =>
    value.children.map(child => Object.assign({ 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"
    }
  ]
]

因此，我们要做的最后一件事是使用展平此数组.reduce((l, r) => l.concat(r), [])，这是展宽数组的通用方法。这将一个空数组作为“种子”值，并将数组一一连接在一起以产生最终结果。

这种扁平化操作的示例：

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