Javascript通过递归获取子节点对象

Question

在后端 php 服务器中，我有一个这样的类部分:

Class Part(){
   $id; // Integer
   $name; //string
   $parents; // Array, which is a list of all of parents Part
}

所以属性 $parents，它本质上是一个 Part 类型的列表，因为一个 Part 可以有一个父 Part。

例如，您需要 Part id=1 & Part id=2，才能构建 Part id=3。您需要 Part id=3、Part id=4、Part id=5 来构建 Part id=6，依此类推...

我从服务器获取这个 json 数据。

    [{
        "id": 1,
        "name": "foo",
        "list_parents": [{
            "id": 3,
            "name": "foobar",
            "list_parents": [{
                "id": 6,
                "name": "ttt",
                "list_parents": [{
                    "id": 7,
                    "name": "xxx",
                    "list_parents": []
                }, {
                    "id": 8,
                    "name": "yyy",
                    "list_parents": []
                }, {
                    "id": 9,
                    "name": "zzz",
                    "list_parents": []
                }]
            }]
        }]
    }, {
        "id": 2,
        "name": "bar",
        "list_parents": [{
            "id": 3,
            "name": "foobar",
            "list_parents": [{
                "id": 6,
                "name": "ttt",
                "list_parents": [{
                        "id": 7,
                        "name": "xxx",
                        "list_parents": []
                    },
                    {
                        "id": 8,
                        "name": "yyy",
                        "list_parents": []
                    },
                    {
                        "id": 9,
                        "name": "zzz",
                        "list_parents": []
                    }
                ]
            }]
        }]
    },
    {
        "id": 3,
        "name": "foobar",
        "list_parents": [{
            "id": 6,
            "name": "ttt",
            "list_parents": [{
                    "id": 7,
                    "name": "xxx",
                    "list_parents": []
                },
                {
                    "id": 8,
                    "name": "yyy",
                    "list_parents": []
                },
                {
                    "id": 9,
                    "name": "zzz",
                    "list_parents": []
                }
            ]
        }]
    },
    {
        "id": 6,
        "name": "ttt",
        "list_parents": [{
            "id": 7,
            "name": "xxx",
            "list_parents": []
        }, {
            "id": 8,
            "name": "yyy",
            "list_parents": []
        }, {
            "id": 9,
            "name": "zzz",
            "list_parents": []
        }]
    },
    {
        "id": 7,
        "name": "xxx",
        "list_parents": []
    },
    {
        "id": 8,
        "name": "yyy",
        "list_parents": []
    },
    {
        "id": 9,
        "name": "zzz",
        "list_parents": []
    }

]

因此，正如您所见，它最终会形成一棵具有大量节点的大树。我需要为用户请求信息的任何部分 ID 获取所有 parent 的信息。

在前面的例子中，用户想要获取id=1部分的数据，所以服务器返回给我这个json数据。

所以在内存中它看起来像这棵树。第 1 部分有一个父对象，它是 3，第 3 部分有一个父对象，它是 6，第 6 部分可能有 3 个父对象，它们可以是 10、20、30...

我正在尝试使用递归函数在 Javascript 中获取此信息，因为我需要构建此树并使用 JSTree 插件将其显示给用户。

Essentially, a node is : <ul><li>NAME OF PART </li></ul>

but when a node have parents, i need to insert a <ul> inside the <li> tag. 

For my example, the final html would be :

> <ul>   <li> Part 1 
>     <ul>
>       <li> Part 3 
>         <ul>
>           <li> Part 6
>             <ul>
>                 <li> Part xxx
>                 </li>
>                  <li> Part yyy
>                 </li>
>                  <li> Part zzz
>                 </li>
>  
>             </ul>
>           </li>
>         </ul>
>       </li>
>     </ul>   </li> </ul>

我试图创建一个递归函数来构建此 html，但我无法让它工作，我的函数如下所示:

function get_data_html(obj, html){
    let retval = "<ul>";
    if (obj.list_parents.length < 0 )
        return retval += "<li>" + obj.name + "</li></ul>";
    else
       $.each(obj.list_parents, function(index, item) {
          get_data_html(item, retval);
       });
}

我得到的不是 parent 1,3,6 的顺序，而是 1,6,3。它从最后一个 parent 到第一个 parent ，而不是从第一个到最后一个。

谢谢!

Answer 1

您可以在 <li> 中获取 parent 节点(看起来像子节点)标签。

function getNodes(array) {
    return array.length
        ? '<ul><li>' + array.map(({ name, list_parents }) => name + getNodes(list_parents)).join('</li><li>') + '</li></ul>'
        : '';
}

var data = [{ id: 1, name: "foo", list_parents: [{ id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }] }, { id: 2, name: "foo", list_parents: [{ id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }] }, { id: 3, name: "foobar", list_parents: [{ id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }] }, { id: 6, name: "ttt", list_parents: [{ id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }] }, { id: 7, name: "xxx", list_parents: [] }, { id: 8, name: "yyy", list_parents: [] }, { id: 9, name: "zzz", list_parents: [] }];


document.body.innerHTML += getNodes(data);