Сгладить вложенный массив объектов JS - PullRequest
Новая
       7

Сгладить вложенный массив объектов JS

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

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

Вот моя реализация: 

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(_.compact(_.map(headers, item => item.children))[0], item1 => item1.child)))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Ожидаемый результат: 

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

Пожалуйста, советуйте.

Редактировать: я смог получить требуемый результат, используя console.log ( .flattenDeep ( .map ( .flattenDeep ( .compact (_. Map (headers), 'children'))), 'child')))

Но есть ли оптимизированная версия для того же? Спасибо

1 Ответ

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

Получите дочерние элементы с _.flatMap(), отфильтруйте значения undefined, а затем снова используйте _.flatMap(), чтобы получить значения свойства 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 = _.flatMap(_.compact(_.flatMap(headers, 'children')), 'child')

console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Если вы используете lodash / fp, вы можете сгенерировать более читаемую функцию с помощью _.flow(): 

const fn = _.flow(
  _.flatMap('children'),
  _.compact,
  _.flatMap('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 = fn(headers)

console.log(result)
<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

Использование lodash с _.flow() и _.partialRight(): 

const pr = _.partialRight;

const fn = _.flow(
  pr(_.flatMap, 'children'),
  _.compact,
  pr(_.flatMap, '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 = fn(headers)

console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
...