MongoDB 或 JavaScript 中使用递归和遍历技术的嵌套集合树视图数据结构

Question

嘿，我正在尝试在我的 MERN 应用程序 中的重新排序序列中实现嵌套拖放。我正在努力寻找 mongodb 数据模型的理想方法，并为无限子文件夹实施 Lexicographic order 或 linked lists 。我在这个 link 中使用了 Model Tree Structures 但每个节点都有无限的子节点，因为它们需要递归和递归函数或柯里化。文档不够清晰，无法做到这一点。

我想显示所有树一次，而不是在点击箭头后出现 icon.There 是我的前端生成涂鸦，只使用一个 depth ，例如 graph nodes。也许 Modified Preorder Tree Traversal 你有这个场景的实施示例。


const tree = data => {  // immutable array
    let ascendants = data.filter(d=>d.parent==null)
    let descandants = data.filter(d=>d.parent)
  **strong text**
    let form = []
    ascendants.map(a=>{
        let node1 = {...a}; /// copying
            
            let node1Children = []; 
            descandants.map(b=>{
                let node2 = {...b};
                
                if(node1._id == b.parent){
                     node1Children.push(node2)
                }
                
            })

        node1.children = node1Children;


        form.push(node1);
    })
    return form;


}

我无法通过使用 $graphLookup 获得结果，因为列表格式不是我 want.Could 你给我一些 mongodb playground 或分组 aggregate 解决方案？下面 json 个示例显示了我的预期结果。我以前可以做，但硬编码是不合适的，而且性能不佳。比较好方法吗？



[
    // mongo database
    {_id:123, title:'Books', slug:'books', parent:null },
    {_id:124, title:'Programming', slug:'programming', parent:null },
    {_id:125, title:'JavaScript', slug:'javascript', parent:'programming' },
    {_id:126, title:'C++',slug:'cpp', parent:'programming' },
    {_id:127, title:'React', slug:'react', parent:'javascript' },
    {_id:128, title:'Redux', slug:'redux', parent:'react' },
    {_id:129, title:'Toolkit', parent:'redux' },
    {_id:130, title:'Saga', parent:'redux' },
    {_id:131, title:'Nodejs', parent:'programming' },
    {_id:132, title:'Databases', slug:'databases' },
    {_id:133, title:'MongoDB', parent:'databases' },
]

[
   // what i want
   { title: "Books"},
   { title: "Programming", parent:"computer-science", children: [

        { title: "JavaScript", children: [
            { title: "React",  children: [
                { title: "Redux", children: [
                    { title: "Saga" },
                    { title: "Thunk" },
                    { title: "Mobx" },
                    { title: "Observable" },
                    { title: "Context" },
                    { title: "GraphQL" },
                    { title: "Toolkit", children:[
                        { title: "typescript" },
                        { title: "slices", children:[
                            { title: "createAsyncThunk" },
                            { title: "createSlice" },
                        ] },
                   ] },

                ] },
                { title: "Nextjs" },
            ]},
            { title: "Vue", },
            { title: "angular", },

        ]},
        { title: "C++", },
        { title: "NodeJS", },

   ] },
   { title: "MongoDB", parent: "databases"},
]

Answer 1

您可以通过 slug 创建一个地图来设置您的对象的关键。每个键的值将是父对象的结果对象。包括 null 的条目，它将收集顶级元素。

然后再次迭代数据以填充 children 数组——当属性尚不存在时，即时创建它。最后输出顶层元素。

function makeTree(data) {
    let children = []; // Top-level elements
    let map = new Map(data.map(({title, slug}) => [slug, { title }]))
                     .set(null, {children});
    for (let {slug, parent, title} of data) {
        (map.get(parent || null).children ??= [])
                .push(slug ? map.get(slug) : {title});
    }
    return children;
}

// Your mongodb data:
const data = [{_id:123, title:'Books', slug:'books', parent:null },{_id:124, title:'Programming', slug:'programming', parent:null },{_id:125, title:'JavaScript', slug:'javascript', parent:'programming' },{_id:126, title:'C++',slug:'cpp', parent:'programming' },{_id:127, title:'React', slug:'react', parent:'javascript' },{_id:128, title:'Redux', slug:'redux', parent:'react' },{_id:129, title:'Toolkit', parent:'redux' },{_id:130, title:'Saga', parent:'redux' },{_id:131, title:'Nodejs', parent:'programming' },{_id:132, title:'Databases', slug:'databases' },{_id:133, title:'MongoDB', parent:'databases' }];

console.log(makeTree(data));

MongoDB 或 JavaScript 中使用递归和遍历技术的嵌套集合树视图数据结构

Nested set tree view data structure using with recursing and traversal techniques in MongoDB or JavaScript

javascript

tree

nested-sets

mongodb