来自JSON文件的Javascript中的父子TreeView
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了来自JSON文件的Javascript中的父子TreeView相关的知识,希望对你有一定的参考价值。
我想创建一个对象数组。并且每个对象可以再次具有来自JSON文件的对象数组。 JSOn中的每个对象都有一个parent_id,它告诉它属于哪个id。
"data":[
{
"id":"node_0",
"intentName":"pdf"
"parent_id":"-1"
},
{
"id":"node_2",
"intentName":"Key Leadership",
"parent_id":"node_0"
},
{
"id":"node_3",
"intentName":"Financial Results",
"parent_id":"node_0"
},
{
"id":"node_1",
"intentName":"Business Summary",
"parent_id":"node_0"
},
{
"id":"node_7",
"intentName":"Key Strategy",
"parent_id":"node_1"
},
{
"id":"node_34",
"intentName":"CompanyInReport",
"parent_id":"node_1"
},
{
"id":"node_36",
"intentName":"Operating Locations",
"parent_id":"node_0"
}]
这是具有parent_id的JSON文件(-1表示根父,其他表示其父ID)。我想在启动时动态创建一个类似下面的数组。
menuItems = [
{
title: 'Key Leadership'
},
{
title: 'Financial Results'
},
{
title: 'Business Summary',
values: [
{ title: 'Key Strategy'},
{ title: 'CompanyInReport'}
]
},
{
title: 'Operating Locations'
}]
提前致谢。
答案
您不仅可以使用节点信息id
创建树,还可以使用parent_id
创建树,并将节点信息分配给节点,将父信息分配给父节点。
这通过以任意顺序获取节点而导致树结构。
结果只取得所需父节点的值,在本例中为"node_0"
。
var data = [{ id: "node_0", intentName: "pdf", parent_id: "-1" }, { id: "node_2", intentName: "Key Leadership", parent_id: "node_0" }, { id: "node_3", intentName: "Financial Results", parent_id: "node_0" }, { id: "node_1", intentName: "Business Summary", parent_id: "node_0" }, { id: "node_7", intentName: "Key Strategy", parent_id: "node_1" }, { id: "node_34", intentName: "CompanyInReport", parent_id: "node_1" }, { id: "node_36", intentName: "Operating Locations", parent_id: "node_0" }],
tree = function (data, root) {
var o = {};
data.forEach(({ id, intentName: title, parent_id }) => {
Object.assign(o[id] = o[id] || {}, { title });
o[parent_id] = o[parent_id] || {};
o[parent_id].values = o[parent_id].values || [];
o[parent_id].values.push(o[id]);
});
return o[root].values;
}(data, 'node_0');
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
以上是关于来自JSON文件的Javascript中的父子TreeView的主要内容,如果未能解决你的问题,请参考以下文章
Javascript - 来自具有“父”和“子”行的表中的 Json
无法解析来自thymeleaf的javascript中的JSON对象
来自 typescript/javascript 的 JSON.stringify 与 Java 控制器中的 json-String param/request-body 不匹配