Функция, которая на входе получает массив объектов вместе с дочерними элементами. Как получить такой массив с многоуровневыми вложениями?

Question

[1nsayt]

Есть такой массив объектов

const obj = [
  {
    name: 'hunter',
    isExpanded: true,
    children: [
                {
                  name: 'rain',
                  isExpanded: true,
                  children: [
                    {name: 'zevs',
                     isExpanded: false
                    },
                    {name: 'jupiter',
                     isExpanded: false
                    },
                  ]
                },
                {
                  name: 'vortex',
                  isExpanded: false
                },
                {
                  name: 'fray',
                  isExpanded: false
                },
              ]      
  },
  {
    name: 'focus',
    isExpanded: false,
    children: [
                {
                  name: 'dizik',
                  isExpanded: false
                },
                {
                  name: 'shank',
                  isExpanded: true,
                  children:[
                    {name: 'storm',
                     isExpanded: false},
                  ]
                },
                {
                  name: 'free',
                  isExpanded: false
                },
              ]      
  },
  {
    name: 'devil',
    isExpanded: true,
    children: [
                {
                  name: 'defavu',
                  isExpanded: false
                },
                {
                  name: 'hope',
                  isExpanded: true,
                  children: [
                    {name: 'rilay',
                    isExpanded: false},
                    {name: 'truth',
                    isExpanded: false}
                  ]
                },
                {
                  name: 'miracle',
                  isExpanded: false
                },
              ]      
  }
]

Нужно получить массив c 0 уровнем объектов вместе со всеми дочерними элементами, при условии если у родителя флаг раскрытия стоит в true. Я попытался вывести это дело через рекурсию, но возникла сложность с переходом на предыдущий уровень. На соседний дочерний элемент я пройти могу(в этом случае я храню ссылку на их родителя), но если возвращаться к родителю и уже рассматривать его как дочерний элемент, не выходит. [{name:hunter,isExpanded:true},{name:'rain',isExpanded:true}, {name:"rain",isExpanded:true}, {name:"zevs", isExpanded: false},{name:"jupiter",isExpanded:false},{name:"vortex",isExpanded:false},{name:"fray",isExpanded:false},{name:"focus",isExpanded:false}, {name:"devil",isExpanded:true},{name:"defavu",isExpanded:false}, {name:"shank",isExpanded:true}, {name:"storm",isExpanded:false}, {name:"free",isExpanded:false}]

Comments

[Антон Антон]

Покажите на jsfiddle, как пытались

[1nsayt]

У меня пока что так выходит, с индексацией напутал конечно, https://jsfiddle.net/dd333/ourn1va4/7/ но мне просто нужно знать как на уровни предыдущие переходить

Answer 1

[0xD34F]

const flat = arr =>
  (arr || []).reduce((acc, { children, ...n }) => {
    if (n.isExpanded || !children) {
      acc.push(n, ...flat(children));
    } else {
      acc.push({ ...n, children });
    }

    return acc;
  }, []);

UPD. Если вложенные уровни надо разворачивать несмотря на isExpanded: false у кого-то из предков уровнем выше родительского, то

const flat = arr =>
  (arr || []).reduce((acc, { children, ...n }) => {
    const flatChildren = flat(children);

    if (n.isExpanded || !children) {
      acc.push(n, ...flatChildren);
    } else {
      acc.push({ ...n, children: flatChildren });
    }

    return acc;
  }, []);

Comments

[1nsayt]

Спасибо большое!