javascript - 展平嵌套的对象数组，将父值附加到子值

Question

我有一个嵌套的对象数组，并且只想获取数组的子属性元素，其中父元素的标题附加到 child 中的标题。这只是一个示例，实际数据将在数组中的单独索引中包含唯一的子属性。

我想在我的解决方案中实现 flatMap，而不是使用 flattenDeep 和来自 lodash 的 map。请指教。

const headers = [{
  "id": "name1",
  "title": "Name 1",
  "children": [{
    "title": "Children 1",
    "child": [{
      "title": "Child 1",
      "onClick": "child1Click"
    }, {
      "title": "Child 2",
      "onClick": "child2Click"
    }]
  }, {
    "title": "CHildren 2",
    "child": [{
      "title": "Child 3",
      "id": "child3Click"
    }, {
      "title": "Child 4",
      "id": "child4Click"
    }]
  }]
}, {
  "id": "name2",
  "title": "Name 2",
  "children": [{
    "title": "Children 3",
    "child": [{
      "title": "Child 5",
      "onClick": "child5Click"
    }, {
      "title": "Child 6",
      "onClick": "child6Click"
    }]
  }, {
    "title": "CHildren 4",
    "child": [{
      "title": "Child 7",
      "id": "child7Click"
    }, {
      "title": "Child 8",
      "id": "child8Click"
    }]
  }]
}, {
  "id": "name3",
  "title": "Name 3"
}, {
  "id": "name4",
  "title": "Name 4"
}]

console.log(_.flattenDeep(_.map(_.flattenDeep(_.compact(_.map(headers, item => item.children))), item => _.map(item.child, child => {
	return {
  	...child,
    title: `${item.title} ${child.title}`
  }
}))))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

我期望的输出是

[
  {
    "title": "Children 1 Child 1",
    "onClick": "child1Click"
  },
  {
    "title": "Children 1 Child 2",
    "onClick": "child2Click"
  },
  {
    "title": "CHildren 2 Child 3",
    "id": "child3Click"
  },
  {
    "title": "CHildren 2 Child 4",
    "id": "child4Click"
  },
  {
    "title": "Children 3 Child 5",
    "onClick": "child5Click"
  },
  {
    "title": "Children 3 Child 6",
    "onClick": "child6Click"
  },
  {
    "title": "CHildren 4 Child 7",
    "id": "child7Click"
  },
  {
    "title": "CHildren 4 Child 8",
    "id": "child8Click"
  }
]

任何帮助是极大的赞赏。谢谢

标签： javascriptarraysobjectlodash

Answer 1

您可以只用两个用于children 和child 的reduce内部循环来解决这个问题。forEach

const headers = [{"id":"name1","title":"Name 1","children":[{"title":"Children 1","child":[{"title":"Child 1","onClick":"child1Click"},{"title":"Child 2","onClick":"child2Click"}]},{"title":"CHildren 2","child":[{"title":"Child 3","id":"child3Click"},{"title":"Child 4","id":"child4Click"}]}]},{"id":"name2","title":"Name 2","children":[{"title":"Children 3","child":[{"title":"Child 5","onClick":"child5Click"},{"title":"Child 6","onClick":"child6Click"}]},{"title":"CHildren 4","child":[{"title":"Child 7","id":"child7Click"},{"title":"Child 8","id":"child8Click"}]}]},{"id":"name3","title":"Name 3"},{"id":"name4","title":"Name 4"}]

const result = headers.reduce((r, {children}) => {
  children && children.forEach(({title: pTitle, child}) => {
    child && child.forEach(({title, ...rest}) => r.push({
      title: `${pTitle} ${title}`,
      ...rest
    }))
  })
  
  return r;
}, [])

console.log(result)