Как на javascript сделать древовидную структуру массива из массива из трёх полей id, name, parent?

Подскажите, если я имею массив подобного вида и на сервере хранится в подобной структуре

[
  id:1,name:"Text",parent:0,
  id:2,name: "Folder in Parent Folder with id 1", parent: 1,
  id:555, name: "Rekursive folder in Folder 2....", parent:2
]

Я бы хотел в списке отрисовать эти данные, полученные данные отрисовать из массива, где parent это родительский элемент.

[
 id:1, name:"Text",
 children: [
   id:2,name: "Folder in Parent Folder with id 1", 
   children: [
     id:555, name: "Rekursive folder in Folder 2...."
   ]
]

Как это преобразовать рекурсивно, так как неизвестен уровень вложений?
  • Вопрос задан
  • 199 просмотров
Решения вопроса 3
john36allTa
@john36allTa
That`s calling Walker
на скорую руку как то так можно
var rawData = [
  { id:1,name:"Root element",parent:0 },
  { id:2,name: "Child of the first element", parent: 1},
  { id:555, name: "Child of the second element", parent:2}
];


function pack( data ){
	const childs = id => 
		data.filter( item => item.parent === id )
			.map( 
				({id,name}) => ({id,name, children: childs(id)}) 
			).map(
				({id,name,children}) => children.length ? {id,name, children} : { id, name }
			);
	return childs(0);
}

console.log(JSON.stringify(pack(rawData)))
Ответ написан
@dimoff66
Кратко о себе: Я есть
Всего пару строчек кода, которые при желании можно и в одну соединить в ущерб наглядности

const map = Object.assign({} , ...arr.map(v => 
  ({ [v.id]: Object.assign(v, { children: [] }) })
))

const tree = Object.values(map).filter(v => 
 !(v.parent && map[v.parent].children.push(v))
)
Ответ написан
Bavashi
@Bavashi
var arr = [
        {id:1,name: "Text", parent: 0},
        {id:2,name: "Folder in Parent Folder with id 1", parent: 1},
        {id:555,name: "Rekursive folder in Folder 2....", parent: 2}
];

function makeTree(array, parent) {
  var tree = {};
  parent = typeof parent !== 'undefined' ? parent : {id: 0};

  var childrenArr = array.filter(function(child) {
    return child.parent == parent.id;
  });

  if (childrenArr.length > 0) {
    var childrenObj = {};
    childrenArr.forEach(function(child) {
      childrenObj[child.id] = child;
    });
    if (parent.id == 0) {
      tree = childrenObj;
    } else {
      parent.children = childrenObj;
    }
    childrenArr.forEach(function(child) {
      makeTree(array, child);
    })
  }

  return tree;
};

console.log(makeTree(arr));
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
WblCHA
@WblCHA
Я так понимаю входные данные ─ это массив объектов с любыми ид?
Тогда можно так:
Создаёшь константу пустого массива, форичем проходишься по входным данным и по паренту пихаешь детей куда надо.
Всё.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы