gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:16:42 25 4
gpt4 key购买 nike

在后端 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数据。

Image

所以在内存中它看起来像这棵树。第 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 ,而不是从第一个到最后一个。

谢谢!

最佳答案

您可以在 <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);

关于Javascript通过递归获取子节点对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51853658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com