Question

在后端php服务器中，我有一个类似这样的类Part：

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

因此，属性$ parents本质上是Part类型的列表，导致Part可以具有父Part。

例如，您需要零件ID = 1和零件ID = 2来构建零件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的所有父母的信息。

在前面的示例中，用户希望获取部件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);
       });
}

我得到了1,6,3，而不是父母1,3,6的顺序。它的构建是从最后一个父母到第一个父母，而不是从头到尾。

谢谢！

Answer 1

您可以将{em> parent 节点（看起来像子节点）放在<li>标签内。

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);

JavaScript递归获取子节点对象

1 个答案: