javascript - 将所有父节点的路径分配给树中的“this”节点
问题描述
对于给定的输入
[
{ id: 1, path: 'foo/bar/1' },
{ id: 2, path: 'foo/bar/2' },
]
我生成了一个如下所示的树,它是每个路径的树表示,由/
.
{
"path": "foo",
"children": [
{
"path": "bar",
"children": [
{
"path": "1",
"children": [],
"id": 1,
"nestingLevel": 2
},
{
"path": "2",
"children": [],
"id": 2,
"nestingLevel": 2
}
],
"nestingLevel": 1
}
],
"nestingLevel": 0
}
到目前为止,我有以下代码可以执行上述操作:
const inputArray = [
{ id: 1, path: 'foo/bar/1' },
{ id: 2, path: 'foo/bar/2' },
];
const result = [];
const level = { result };
// Produce the tree
for (p of inputArray) {
let last;
let { path, ...rest } = p;
path.split('/').reduce((r, path, i, { length }) => {
if (!r[path]) {
r[path] = { result: [] };
last = { path, children: r[path].result };
r.result.push(last);
}
return r[path];
}, level);
Object.assign(last, rest);
}
// Walk the tree and assign nesting level (intended for UI stuff)
function traverse(obj, nestingLevel = 0) {
if (obj !== null && typeof obj == 'object') {
Object.entries(obj).forEach(([key, value]) => {
value.nestingLevel = nestingLevel;
traverse(
value,
// don't increment level if it's we're going over children []
typeof value == 'object' && !Array.isArray(value) ? nestingLevel + 1 : nestingLevel
);
});
}
}
traverse(result);
console.log(JSON.stringify(result[0], null, 4));
我想要做的(但还不知道如何)是将完整的父路径(as fullPath
)添加到每个节点,以便输出看起来像:
{
"path": "foo",
"fullPath": "foo",
"children": [
{
"path": "bar",
"fullPath": "foo/bar",
"children": [
{
"path": "1",
"fullPath": "foo/bar/1",
"children": [],
"id": 1,
"nestingLevel": 2
},
{
"path": "2",
"fullPath": "foo/bar/2",
"children": [],
"id": 2,
"nestingLevel": 2
}
],
"nestingLevel": 1
}
],
"nestingLevel": 0
}
有人愿意分享他们的想法吗?
解决方案
您可以扩展您的 'traverse()' 函数,并添加累积路径。每次下台时,再加一部分。在每个对象级别分配它。
您的遍历功能很酷可以这样更改:
// Walk the tree and assign nesting level (intended for UI stuff)
function traverse(obj, nestingLevel = 0,fullp = "")
{
if (obj !== null && typeof obj == 'object')
{
Object.entries(obj).forEach(([key, value]) => {
value.nestingLevel = nestingLevel;
if(typeof value == 'object' && !Array.isArray(value))
traverse(value,nestingLevel+1,fullp);
else{
fp = fullp + "/" + obj.path;
obj.fullPath = fp;
traverse(value,nestingLevel,fp);
}
});
}
}
然后结果是这样的:
{
"path": "foo",
"children": [
{
"path": "bar",
"children": [
{
"path": "1",
"children": [],
"id": 1,
"nestingLevel": 2,
"fullPath": "/foo/bar/1"
},
{
"path": "2",
"children": [],
"id": 2,
"nestingLevel": 2,
"fullPath": "/foo/bar/2"
}
],
"nestingLevel": 1,
"fullPath": "/foo/bar"
}
],
"nestingLevel": 0,
"fullPath": "/foo"
}
推荐阅读
- java - 使用 JOOQ 进行 INNER JOIN 时如何正确使用 WHERE?
- stored-procedures - Azure Cosmos DB SQL API 存储过程示例
- reactjs - 在 React 中悬停列表项时如何显示组件?
- javascript - React Native FlatList keyExtractor 和 listKey
- node.js - Puppeteer 登录 TikTok
- python - GridSearchCV 给出“__init__() 得到了一个意外的关键字参数‘n_topics’”错误
- c# - 如何将 Blazor 客户端 AuthorizeView 控制策略功能与 Azure Ad 结合使用?
- ruby - inspec - 我想输出结构化数据以供另一个函数解析
- html - 在css中单击按钮时如何使按钮下方的div向下移动
- javascript - Document.querySelector 返回 null 直到使用 DevTools 检查元素