[英]Flatten nested array of objects prepending parent value to child
I have a nested array of objects and want to get only the child property elements of an array with the title of the parent element prepended to the title in the child .我有一个嵌套的对象数组,并且只想获取数组的子属性元素,其中父元素的标题附加到 child 中的标题。 This is just an example and the actual data will include a unique children property in separate indices in the array.
这只是一个示例,实际数据将在数组中的单独索引中包含唯一的子属性。
I would like to implement flatMap in my solution instead of using flattenDeep and map from lodash.我想在我的解决方案中实现 flatMap,而不是使用来自 lodash 的 flattenDeep 和 map。 Please advice.
请指教。
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>
The output I expect is我期望的 output 是
[
{
"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"
}
]
Any help is greatly appreciated.任何帮助是极大的赞赏。 Thanks
谢谢
You can solve this with just reduce
and two inner forEach
loops for children and child.您可以通过
reduce
和两个用于 children 和 child 的内部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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.