JavaScript:从JSON数组构建自定义数据树
我正在尝试使用JavaScript从一个平面的输入数据数组创建一个自定义JSON树结构 我的输入数组中没有任何“parentId”类型的数据,但是我有每个项的“level”。以下代码是我的输入数据示例,具有所需的树结构。我认为这是可行的,但我不知道如何在JavaScript中实现这一点:JavaScript:从JSON数组构建自定义数据树,javascript,Javascript,我正在尝试使用JavaScript从一个平面的输入数据数组创建一个自定义JSON树结构 我的输入数组中没有任何“parentId”类型的数据,但是我有每个项的“level”。以下代码是我的输入数据示例,具有所需的树结构。我认为这是可行的,但我不知道如何在JavaScript中实现这一点: var arr=[ { "text":"text1", "level" :"1", }, { "text":"text2", "level" :"2", }, {
var arr=[
{
"text":"text1",
"level" :"1",
},
{
"text":"text2",
"level" :"2",
},
{
"text":"text3",
"level" :"3",
},
{
"text":"text4",
"level" :"3",
},
{
"text":"text5",
"level" :"2",
},
{
"text":"text6",
"level" :"1",
}
];
我需要将arr
转换为此树结构:
{
"text": "Text 1",
"level" :"1",
"nodes": [
{
"text": "Text 2",
"level" :"2",
"nodes": [
{
"text": "Text 3",
"level" :"3",
},
{
"text": "Text 4",
"level" :"3",
}
]
},
{
"text": "Text 5",
"level" :"2",
}
]
},
{
"text": "Text 6",
"level" :"1"
}
];
这正是我认为你需要的,这只是一个不完整的样本。因此,更好地研究如何:D。希望这能有所帮助 提示:创建用于成型节点的方法/模板
var obj={};
obj.text=“文本1”;
obj.level=“1”;
变量节点=[{“文本”:“文本2”,“级别”:“2”},{“文本”:“文本5”,“级别”:“2”}];
obj.nodes=节点;
控制台日志(obj)代码>这正是我认为您需要的,这只是一个不完整的示例。因此,更好地研究如何:D。希望这能有所帮助
提示:创建用于成型节点的方法/模板
var obj={};
obj.text=“文本1”;
obj.level=“1”;
变量节点=[{“文本”:“文本2”,“级别”:“2”},{“文本”:“文本5”,“级别”:“2”}];
obj.nodes=节点;
控制台日志(obj)代码>一种方法是构建包含两个处理阶段的树,首先:
按级别对数据中的输入项进行升序排序。这个预处理简化了下一步的树构造,允许从根开始按顺序将节点插入到树中
“Reduce”已排序的数组项,构建一个结构化的树,其中包含每个Reduce迭代。树的构造基于“查找”适当的“节点数组”,当前迭代的项应插入其中。这一分类概括为三种主要情况:
- 不存在树,因此返回当前
项
,作为正在生成的树的起始根节点
- 在树中查找与当前迭代的
项直接匹配的节点
项(并将项
插入该节点
数组)
- 或者,找到一个
节点
数组,该数组是正在迭代的当前项
的“父级”(并将项
插入该父级节点
数组)
在代码中,这可以表示为以下内容(有关更多详细信息,请参阅文档):
const data=[{“text”:“text1”,“level”:“1”},{“text”:“text2”,“level”:“2”},{“text”:“text3”,“level”:“3”},{“text”:“text4”,“level”:“3”},{“text”:“text5”,“level”:“2”},{“text”:“text6”,“level”:“1”};
常量结果=数据
/*按级别对输入数组中的项进行排序*/
.sort((i,j)=>i.level-j.level)
/*将数组“缩减”为结构化树*/
.reduce((根,项)=>{
/*如果当前根数组为空,则使用第一个项数组启动树*/
if(root.length==0){
返回[项目];
}
/*这是一个“搜索”,我们在树下(从根)查找
当前“项”应插入的“节点”数组
*/
对于(var节点=根;;){
const[first]=节点;
if(first.level==item.level){
/*
如果当前节点数组的级别与项级别匹配,请将项添加到
树的节点
*/
节点。推送(项目);
打破
}else if(first.level==item.level-1){
/*
如果当前节点的级别是项的父级,则初始化父级
级别节点并将项添加到父节点
*/
first.nodes=Array.isArray(first.nodes)?first.nodes:[]
首先。节点。推送(项目);
打破
}否则{
/*
沿着树向下迭代到下一级/更低级别的子节点*/
nodes=first.nodes
如果(!Array.isArray(节点)){
打破
}
}
}
返回根;
}, []);
console.log(result);
一种方法是构建包含两个处理阶段的树,首先:
按级别对数据中的输入项进行升序排序。此预处理简化了下一步的树构造,允许按从根开始的顺序将节点插入树中
“减少”已排序的数组项,为每次减少迭代构建一个结构化树。树的构建基于“查找”当前项
应插入的适当“节点数组”。此分类由三种主要情况总结:
- 不存在树,因此返回当前
项
,作为正在生成的树的起始根节点
- 在树中查找与当前迭代的
项直接匹配的节点
项(并将项
插入该节点
数组)
- 或者,找到一个
节点
数组,该数组是正在迭代的当前项
的“父级”(并将项
插入该父级节点
数组)
在代码中,这可以表示为以下内容(有关更多详细信息,请参阅文档):
const data=[{“text”:“text1”,“level”:“1”},{“text”:“text2”,“level”:“2”},{“text”:“text3”,“level”:“3”},{“text”:“text4”,“level”:“3”},{“text”:“text5”,“level”:“2”},{“text”:“text6”,“level”:“1”};
常量结果=数据
/*按级别对输入数组中的项进行排序*/
.sort((i,j)=>i.level-j.level)
/*将数组“缩减”为结构化树*/
.reduce((根,项)=>{
/*如果当前根数组为空,则使用第一个项数组启动树*/
if(root.length==0){
返回[项目];
}
/*这是一个“搜索”,我们在树下(从根)查找
当前“项”应插入的“节点”数组
*/
对于(var节点=根;;){
const[first]=节点;
if(first.level==item.level){
/*
如果当前节点数组的级别与项级别匹配