Свести вложенный массив объектов, добавляя родительское значение к дочернему - PullRequest
Новая
       32

Свести вложенный массив объектов, добавляя родительское значение к дочернему

1 голос
/ 30 октября 2019

У меня есть вложенный массив объектов, и я хочу получить только дочерние элементы свойства массива с заголовком родительского элемента, добавленным к заголовку дочернего элемента . Это только пример, и фактические данные будут включать уникальное дочернее свойство в отдельных индексах в массиве.

Я бы хотел использовать flatMap в своем решении вместо использования flattenDeep и map из lodash. Пожалуйста, совет. 

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"
  }
]

Любая помощь очень ценится. Спасибо

1 Ответ

2 голосов
/ 30 октября 2019

Вы можете решить эту проблему с помощью 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)
...