映射并缩小具有子对象数组的对象数组，直到具有父级ID的子对象数组 [英] Map and reduce array of objects with a children array down to array of children with parent's id

问题描述

我正在尝试采用这样的对象数组

I'm trying to take an array of objects like this

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

并返回所有子项组合而成的数组，每个子对象都有一个附加值，即父项的"id".

And return an array of all the children combined, with each child object having an additional value, the "id" of the parent.

以上示例，结果.

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

我只是不确定该如何处理.我熟悉数组的展平和数组.但是我只能在不添加parentId的情况下将输出作为原始子项的数组来获取

I'm just not sure how to approach this. I'm familiar with flattening and array of arrays. But I'm only able to get the output as an array of the original children without adding the parentId

推荐答案

这应该做到:

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 中所有属性的新对象.

Takes an object and returns a new object with the parentId property and all of the properties in 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 中的每个数组元素，并返回结果数组.

Takes an object named value, applies the function above to each of the array elements in value.children, and returns an array of the results.

下一步:

values.map(.....)

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

Applies the function above to each of the elements in values and returns an array of the results.

此时，此 .map()调用的结果是一个类似于以下的数组，原始数组的每个元素都有一个元素:

At this point, the result of this .map() call is an array like the following, with one element for each element of the original array:

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

因此，我们要做的最后一件事是使用 .flat()将此数组展平.

So the last thing we do is flatten flatten this array with .flat().

这篇关于映射并缩小具有子对象数组的对象数组，直到具有父级ID的子对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！