JavaScript:从JSON数组构建自定义数据树

JavaScript:从JSON数组构建自定义数据树,javascript,Javascript,我正在尝试使用JavaScript从一个平面的输入数据数组创建一个自定义JSON树结构 我的输入数组中没有任何“parentId”类型的数据,但是我有每个项的“level”。以下代码是我的输入数据示例,具有所需的树结构。我认为这是可行的,但我不知道如何在JavaScript中实现这一点: var arr=[ { "text":"text1", "level" :"1", }, { "text":"text2", "level" :"2", }, {

我正在尝试使用JavaScript从一个平面的输入数据数组创建一个自定义JSON树结构

我的输入数组中没有任何“parentId”类型的数据,但是我有每个项的“level”。以下代码是我的输入数据示例,具有所需的树结构。我认为这是可行的,但我不知道如何在JavaScript中实现这一点:

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){
    /* 
    如果当前节点数组的级别与项级别匹配