Question

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

我想在解决方案中实现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"
  }
]

任何帮助将不胜感激。谢谢

Answer 1

您可以仅通过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)

展平嵌套在父值之前的对象的嵌套数组

1 个答案: