Преобразование массив в дерево js

128

15 ноября 2020, 22:10

Есть массив данных, который необходимо преобразовать в дерево:

const array = [{
  id: 5,
  name: 'vueJS',
  parentId: 3
}, {
  id: 6,
  name: 'reactJS',
  parentId: 3
}, {
  id: 3,
  name: 'js',
  parentId: 1
}, {
  id: 1,
  name: 'dev',
  parentId: null
}, {
  id: 4,
  name: 'photoshop',
  parentId: 2
}, {
  id: 2,
  name: 'UX',
  parentId: null
}];

Сейчас это работает с помощью такой функции:

function arrayToTree(array, parent) {
  var unflattenArray = [];
  array.forEach(function(item) {
    if(item.parentId === parent) {
      var children = arrayToTree(array, item.id);
      if(children.length) {
        item.children = children
      }
      unflattenArray.push(item)
    }
  });
  return unflattenArray;
}
console.log(arrayToTree(array, null));

Есть две проблемы с этой функцией: 1. Значение "parentId" должен быть массивом id, например - parentId: [2, 3] 2. Как передавать в функцию только один аргумент - array?

https://codepen.io/pershay/pen/PgVJOO?editors=0010

Answer 1

const 
 
tree = array => array 
  .reduce ((a, c) => { 
    c.children = array.filter (i => i.parentId == c.id) 
    a.push (c) 
    return a 
  }, []) 
  .filter (i => i.parentId == null) 
 
console.log (tree ([ 
  {id: 5, name: 'vueJS', parentId: 3}, 
  {id: 6, name: 'reactJS', parentId: 3}, 
  {id: 3, name: 'js', parentId: 1}, 
  {id: 1, name: 'dev', parentId: null}, 
  {id: 4, name: 'photoshop', parentId: 2}, 
  {id: 2, name: 'UX', parentId: null} 
]))

Answer 2

Я так понимаю заботиться о сохранности оригинального массива не требуется, вследствие чего предлагаю вариант по проще чем со сверткой:

let makeTree = array => array.filter(item => { 
  // создаем у каждого элемента массив из ссылок на его потомков 
  item.children = array.filter(i => i.parentId === item.id); 
  // оставляем в фильтруемом массиве только элементы верхнего уровня 
  return item.parentId == null; 
}); 
 
let array = [ 
  {id: 5, name: 'vueJS', parentId: 3}, 
  {id: 6, name: 'reactJS', parentId: 3}, 
  {id: 3, name: 'js', parentId: 1}, 
  {id: 1, name: 'dev', parentId: null}, 
  {id: 4, name: 'photoshop', parentId: 2}, 
  {id: 2, name: 'UX', parentId: null} 
]; 
 
console.log (makeTree(array));