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

╰半橙微兮° 2022-08-31 09:55 3阅读 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 条评论，3人围观）

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

相关阅读

相关递归构建树状结构

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

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

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

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

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

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

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

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

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

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

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

相关 726 原子的数量（括号嵌套-递归）

1. 问题描述：给你一个字符串化学式 formula ，返回每种原子的数量。原子总是以一个大写字母开始，接着跟随 0 个或任意个小写字母，表示原子的名字。如果数量大于 1

╰半夏微凉°/ 2022年09月09日 14:49/ 0 赞/ 164 阅读

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

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

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

相关 winfrom递归生成菜单，支持多级嵌套

private void Form2_Load(object sender, EventArgs e) { CreateMenu();

Love The Way You Lie/ 2022年08月14日 00:49/ 0 赞/ 225 阅读

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

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

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

相关将嵌套的数组扁平化

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

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

相关递归遍历嵌套列表

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

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