сплющить дерево с помощью JavaScript и функций es6 - PullRequest
0 голосов
/ 18 ноября 2018

Я новичок в ES6 и хочу сгладить мой объект дерева.(Я использую рефлюкс - не редукс - но сглаживать состояние также хорошая идея при рефлюксе)

api response:

export const node = {
item: 1,
children: [
  {
    item: 2,
    children: [
      {
        item: 3,
        children: [
          {
            item: 4,
            children: []
          },
          {
            item: 5,
            children: []
          },
          {
            item: 6,
            children: [
              {
                item: 7,
                children: []
              },
              {
                item: 8,
                children: []
              },
              {
                item: 9,
                children: []
              }
            ]
          }
        ]
      },
      {
        item: 10,
        children: [
          {
            item: 11,
            children: []
          },
          {
            item: 12,
            children: [
              {
                item: 13,
                children: []
              },
              {
                item: 14,
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
]

}

Моя цель:

 tree= { 
       byId: { 
        item1 : { 
            id: 'item1', 
            name: 'item1', parent: null, 
            children : ['item2']
        }
}

parent - один идентификатор, childrend - массив идентификаторов

для построения хлебных крошек (с использованием parent) или перечисления дочерних объектов ...

получить объект из idс

tree.byId[someId]

моя последняя попытка использовать рекурсивную функцию с оператором распространения es6:

const flattenTree = (tree, flattenTree) => {
    if (node.children.length) {

        node.children.map(child => {
            return flattenTree(child, [...tree= { id: child.item}])
        })

    } else {
        return [...tree, tree.byId[cat.item] = { id: cat.item, name: cat.item }]
    }
}

извините, я здесь впервые, поэтому мой пост не очень хорошо отформатирован ..

спасибо за помощь

1 Ответ

0 голосов
/ 18 ноября 2018
const tree = {
  item: 1,
  children: [
    {
      item: 2,
      children: [
        {
          item: 3,
          children: [
            {
              item: 4,
              children: []
            },
            {
              item: 5,
              children: []
            },
            {
              item: 6,
              children: [
                {
                  item: 7,
                  children: []
                },
                {
                  item: 8,
                  children: []
                },
                {
                  item: 9,
                  children: []
                }
              ]
            }
          ]
        },
        {
          item: 10,
          children: [
            {
              item: 11,
              children: []
            },
            {
              item: 12,
              children: [
                {
                  item: 13,
                  children: []
                },
                {
                  item: 14,
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}


const flattenTree = (tree) => {
  const newTree = { byId: {} };

  const traverseNode = (node, parent) => {
    const id = `item${node.item}`;
    newTree.byId[id] = {
      id,
      name: id,
      parent,
      children: node.children.map((c) => {
        traverseNode(c, id)
        return `item${c.item.id}`;
      })
    }
  }

  traverseNode(tree, null);
  return newTree;
}

Результат flattenTree(tree) будет выглядеть примерно так:

{ byId:
   { item4:
      { id: 'item4', name: 'item4', parent: 'item3', children: [] },
     item5:
      { id: 'item5', name: 'item5', parent: 'item3', children: [] },
     item7:
      { id: 'item7', name: 'item7', parent: 'item6', children: [] },
     item8:
      { id: 'item8', name: 'item8', parent: 'item6', children: [] },
     item9:
      { id: 'item9', name: 'item9', parent: 'item6', children: [] },
     item6:
      { id: 'item6', name: 'item6', parent: 'item3', children: [Array] },
     item3:
      { id: 'item3', name: 'item3', parent: 'item2', children: [Array] },
     item11:
      { id: 'item11', name: 'item11', parent: 'item10', children: [] },
     item13:
      { id: 'item13', name: 'item13', parent: 'item12', children: [] },
     item14:
      { id: 'item14', name: 'item14', parent: 'item12', children: [] },
     item12:
      { id: 'item12',
        name: 'item12',
        parent: 'item10',
        children: [Array] },
     item10:
      { id: 'item10',
        name: 'item10',
        parent: 'item2',
        children: [Array] },
     item2:
      { id: 'item2', name: 'item2', parent: 'item1', children: [Array] },
     item1:
      { id: 'item1', name: 'item1', parent: null, children: [Array] } } }
...