Flatten nested array of objects prepending parent value to child

Question

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 . 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. 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

[
  {
    "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

Answer 1

You can solve this with just reduce and two inner forEach loops for children and child.

 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)