将一个包含子数组的对象数组按照父级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"
  }
]

我不确定如何解决这个问题。我熟悉将数组展成一维数组，但我只能得到原始子节点的数组输出，而没有添加父节点ID。

- user1738539

---

更简短的标题，解释得更多 FTW - DarkMukke

不知道如何更简洁地解释它。 - user1738539

当你提到父母、孩子和ID时，我以为我在读你的描述而不是标题。 - DarkMukke

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()来扁平化这个数组。

- JLRishe

---

喜欢你的解决方案！也许可以添加几行说明你的代码，这样其他不太熟悉函数式js的人也能理解你的解决方案？ - AP.

@AP. 感谢您的建议。已添加说明，但结果超过了几行。 :) - JLRishe

非常好的解决方案，谢谢！如果有多个嵌套的数组/对象，您会如何处理？ - Daniel H.

Answer 2

const arr = [
  {
    "id": "uniqueParentId1",
    "children": [
      {
        "childProp1": "test1",
        "childProp2": "test3"
      }
    ]
  },
  {
    "id": "uniqueParentId2",
    "children": [
      {
        "childProp1": "somevals",
        "childProp2": "other vals"
      },
      {
        "childProp1": "somevals 1",
        "childProp2": "other vals 1"
      }
    ]
  }
];
let combined = [];
arr.forEach((parent) => {
  const {id, children} = parent;
  children.forEach((child) => {
    Object.assign(child, {
      parentId: id
    });
    combined.push(child);
  });
});

console.log(combined);
/*
[
  {
    "parentId": "uniqueParentId1",
    "childProp1": "test1",
    "childProp2": "test3"
  },
  {
    "parentId": "uniqueParentId2",
    "childProp1": "somevals",
    "childProp2": "other vals"
  }
  {
    "parentId": "uniqueParentId2",
    "childProp1": "somevals 1",
    "childProp2": "other vals 1"
  }
]
*/

- Artur

Answer 3

如果您采用更加函数式的方法，可以这样做：

const results = [] //Array we want to store all data in
arr.forEach(e => {
  const {id: parentId} = e  //Extract id as variable parentId

  // Store all the children objects with the added key
  e.children.forEach(c => results.push(Object.assign({parentId}, c)))
})

- AP.