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

Question

嘿，我正在尝试在我的MERN应用程序中实现嵌套的拖放顺序。我致力于为mongodb数据模型找到理想的方法，并为无限子文件夹实现到Lexicographic order或linked lists。我在这个链接中使用了模型树结构，但是每个节点都有无限的子节点，因此需要递归和递归函数或运行。文档不够清晰，无法做到这一点。

我要显示所有的树一次而不是sohuld出现后，比点击箭头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));

​