【Javascript】使用递归将嵌套对象数组转为树状嵌套结构

╰半橙微兮° 2022-08-31 09:55 22阅读 0赞

将ArcGIS Server上的图层信息转为Element UI中的Tree控件数据结构：

let sample = [{ 
        "id": 0,
        "name": "00",
        "children": [1, 2]
      },
      { 
        "id": 1,
        "name": "01",
        "children": [3, 4]
      },
      { 
        "id": 2,
        "name": "02",
        "children": [5]
      },
      { 
        "id": 3,
        "name": "03",
        "children": [6]
      },
      { 
        "id": 4,
        "name": "04",
        "children": []
      },
      { 
        "id": 5,
        "name": "05",
        "children": []
      },
      { 
        "id": 6,
        "name": "06",
        "children": []
      }
    ]
    
    
    // 返回一个节点的所有子节点
    
    function FindObjectChildTree(objectArrayItem, originObjectArray, idPropName, namePropName, childPropName) { 
      // 如果该子节点无子节点，即到达叶子节点，返回
      if (!objectArrayItem[childPropName] || objectArrayItem[childPropName].length == 0) { 
        return { 
          "childTree": { 
            "id": objectArrayItem[idPropName],
            "name": objectArrayItem[namePropName]
          },
          "checkedID": [objectArrayItem[idPropName]]
        }
      }
    
      // 否则该节点含有子节点，需要对其子节点做递归
      // 注意使用let声明变量，将变量作用域限制在块级，实现闭包
      let childTree = { 
        "id": objectArrayItem[idPropName],
        "name": objectArrayItem[namePropName],
        "children": []
      }
    
      let checkedID = []
      checkedID.push(objectArrayItem[idPropName])
    
      let childrenIDArray = objectArrayItem[childPropName];
      childrenIDArray.forEach(childID => { 
        originObjectArray.forEach(originObject => { 
          if (childID == originObject[idPropName]) { 
            const findResult = FindObjectChildTree(originObject, originObjectArray, idPropName, namePropName, childPropName);
            childTree.children.push(findResult["childTree"]);
            checkedID.push(...findResult["checkedID"])
          }
        })
      });
    
      return { 
        "childTree": childTree,
        "checkedID": checkedID
      };
    }
    
    
    let childTree = []
    let checkID = []
    sample.forEach(element => { 
      id = element.id
      if (checkID.indexOf(id) == -1) { 
        checkID.push(id)
        const findResult = FindObjectChildTree(element, sample, "id", "name", "children")
        childTree.push(findResult.childTree)
        checkID.push(...findResult.checkedID)
      }
    });
    
    console.log(JSON.stringify(childTree))
    
    
    [{ 
      "id": 0,
      "name": "00",
      "children": [{ 
        "id": 1,
        "name": "01",
        "children": [{ 
          "id": 3,
          "name": "03",
          "children": [{ 
            "id": 6,
            "name": "06"
          }]
        }, { 
          "id": 4,
          "name": "04"
        }]
      }, { 
        "id": 2,
        "name": "02",
        "children": [{ 
          "id": 5,
          "name": "05"
        }]
      }]
    }]

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关递归构建树状结构

*构建树状结构Demo所需数据库脚本：** [**数据库脚本**][Link 1] **数据结构如下：** ![在这里插入图片描述][watermark_typ...

Dear 丶/ 2024年04月17日 21:52/ 0 赞/ 73 阅读

相关 Javascript 嵌套函数 - 递归函数 - 内置函数详解

Javascript 嵌套函数 - 递归函数 - 内置函数详解目录 Javascript 嵌套函数 - 递归函数 - 内置函数详解一、嵌套函数二、递归函数

╰半夏微凉°/ 2024年02月17日 13:07/ 0 赞/ 49 阅读

相关 python递归函数可以遍历任意结构的嵌套

python递归函数可以遍历任意结构的嵌套 def recsumtree(L): total=0 for x in L:

清疚/ 2023年09月26日 21:48/ 0 赞/ 8 阅读

相关使用JavaScript获取和设置嵌套对象

Back when JavaScript frameworks like [MooTools][] and [jQuery][] ruled the land we all w

墨蓝/ 2023年02月22日 03:38/ 0 赞/ 19 阅读

相关 js递归实现数组转化树状结构

<!DOCTYPE html> <html lang="en"> <head> <meta charse

骑猪看日落/ 2023年02月21日 04:50/ 0 赞/ 26 阅读

相关递归实现对象数组子级嵌套——类似于树形结构

需求：现有一个对象数组： var datascource = [{ name:"元器件", noHead:true, children

野性酷女/ 2022年10月16日 09:55/ 0 赞/ 96 阅读

相关【Javascript】使用递归将嵌套对象数组转为树状嵌套结构

将ArcGIS Server上的图层信息转为Element UI中的Tree控件数据结构： let sample = [{ "id": 0,

╰半橙微兮°/ 2022年08月31日 09:55/ 0 赞/ 23 阅读

相关字符串排列，for循环嵌套递归

字符串的排列，就是给定一个字符串，输出能排列出的所有的字符串，如给定abc的排列有：abc，acb，bac,bca,cba,cab,写这个算法主要是想练习for循环中嵌套递归是

朱雀/ 2022年06月08日 01:27/ 0 赞/ 227 阅读

相关将嵌套的数组扁平化

对于一个像这样的嵌套数组：a=\[1,\[2,\[3,4\]\],5,6\]我们想要把它变成一个一维数组，有下面几种方法：方法一：递归 function pa

心已赠人/ 2022年05月15日 03:09/ 0 赞/ 201 阅读

相关递归遍历嵌套列表

A=[1,2,[3,4,["434",['a','b',['c']]]]] def bianli(lst): for i in lst:

矫情吗；*/ 2022年01月26日 01:39/ 0 赞/ 305 阅读