我正在尝试将一系列文件路径变形为Angular Material Tree组件的嵌套递归结构。结构必须是这样的:
interface FileTreeNode {
name: string;
children?: FileTreeNode[];
}
因此,诸如这样的文件路径列表['path/to/file/01.txt', 'path/to/file/02.txt', 'another/to/file/03.txt']
将转换为:
[
{name: 'path', children: [
{name: 'to', children: [
{name: 'file', children: [
{name: '01.txt'}, {name: '02.txt'}
]
}]
}]
},
{name: 'another', children: [
{name: 'to', children: [
{name: 'file', children: [
{name: '03.txt'}
]
}]
}]
}
]
我在这里看到了一个很好的答案,该问题使用了内置Array.reduce()
方法,但是我想使用RxJs运算符来实现。
这是我要复制的代码:
var paths = ["path/to/file1.doc", "path/to/file2.doc", "foo/bar.doc"],
result = [];
paths.reduce((r, path) => {
path.split('/').reduce((o, name) => {
var temp = (o.children = o.children || []).find(q => q.name === name);
if (!temp) o.children.push(temp = { name });
return temp;
}, r);
return r;
}, { children: result });
console.log(result);
这是我到目前为止的内容:
reduce((acc, curr) => {
return curr.split('/').reduce((obj, name) => {
let temp = (obj.children != null ? obj.children : obj.children = []).find(node => node.name === name);
if (temp == null) {
obj.children.push(temp = {name});
}
return temp;
}, acc);
}, {children: []} as FileTreeNode),
但这仅返回可观察到的最后一个节点(例如{name: 03.txt}
)。我想传递的是acc
上述代码所做的最终值。我还想仅使用RxJs运算符来完成此操作,而不是Array.reduce()
尽可能地依靠内部Js函数。
谢谢!
使用reduce的方式完全相同,不同之处在于您需要将数组转换为流。您可以使用from
运算符
paths = ["path/to/file1.doc", "path/to/file2.doc", "foo/bar.doc"];
paths$ = from(this.paths).pipe(
reduce(
(r, path) => {
path.split("/").reduce((o, name) => {
var temp = (o.children = o.children || []).find(q => q.name === name);
if (!temp) o.children.push((temp = { name }));
return temp;
}, r);
return r;
},
{ children: [] }
)
);
看这个演示
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句