[英]Create a hierarchical object from a flat list parent-child
I am trying to understand the best approach in JS to create an object to pass to a tree view component.我试图了解 JS 中创建对象以传递给树视图组件的最佳方法。 I'm struggling to understand where to begin with regards to the approach.
我正在努力理解从哪里开始关于这种方法。 I have tried doing various things such as splitting the parent child relationship number into an array and then iterating over them, pushing them into a new object, but I still don't know how to keep the relationships.
我尝试过做各种事情,例如将父子关系编号拆分为一个数组,然后对其进行迭代,将它们推入一个新对象,但我仍然不知道如何保持这些关系。 Do i need recursion?
我需要递归吗?
Given the following list of parent child relationships, and associated depth level鉴于以下父子关系列表以及相关的深度级别
1 , depth 1
1.1, depth 2
1.1.1, depth 3
1.1.2, depth 3
1.2.1, depth 3
1.2.2, depth 3
1.2.3, depth 3
1.2.3.4, depth 4
and the output tree below和下面的输出树
1
-1
--1
--2
-2
--1
---1
...
Resulting object should looking like结果对象应该看起来像
[
{
"1": {
"depth": "1",
"child": {
"1.1": {
"depth": "2",
"child": {
"1.1.1": {
"depth": "3",
"child": null
}
}
}
}
},
"2": {
"level": "2",
"depth": "1",
"child": {
"2.1": {
"depth": "2",
"child": {
"2.1.1": {
"depth": "3",
"child": null
}
}
}
}
}
}
]
What would be the best approach in JS to iterate through the list and generate a tree digram, or atleast the object that a tree diagram component could consume?在 JS 中迭代列表并生成树图或至少是树图组件可以使用的对象的最佳方法是什么?
By having an array of sorted items and a level information, you could use an helper array fro keeping track of the last inserted items at a givel level and use this storage to get nested items to the right place.通过拥有一组已排序的项目和一个级别信息,您可以使用辅助数组来跟踪最后插入的项目,并使用此存储将嵌套项目放置到正确的位置。
This approach does not rely on the given title
, only on the order of the items and level
.这种方法不依赖于给定的
title
,只依赖于项目和level
的顺序。
var data = [{ title: '1', level: 1 }, { title: '1.1', level: 2 }, { title: '1.1.1', level: 3 }, { title: '1.1.2', level: 3 }, { title: '1.2.1', level: 3 }, { title: '1.2.2', level: 3 }, { title: '1.2.3', level: 3 }, { title: '1.2.3.4', level: 4 }], result = [], levels = [result]; data.forEach(({ title, level }) => levels[level - 1].push({ title, children: levels[level] = [] }) ); console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
The wanted one.通缉的那个。 No
level
used.未使用
level
。
var data = [{ title: '1', level: 1 }, { title: '1.1', level: 2 }, { title: '1.1.1', level: 3 }, { title: '1.1.2', level: 3 }, { title: '1.2.1', level: 3 }, { title: '1.2.2', level: 3 }, { title: '1.2.3', level: 3 }, { title: '1.2.3.4', level: 4 }], result = {}; data.forEach(({ title, level }) => title .split('.') .reduce((o, _, i, values) => { var key = values.slice(0, i + 1).join('.'); o.child = o.child || {}; return o.child[key] = o.child[key] || { depth: i + 1 }; }, { child: result }) ); console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.