JavaScriptfor循环的树形菜单栏·

简介: JavaScriptfor循环的树形菜单栏·

在此声明一下嗷兄弟闷儿!我没写样式纯粹是console.log()打印控制面板的!

全局声明一个data;

let data;'

然后去获取到json的假数据

let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/menu.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        data = JSON.parse(xhr.responseText);
        // 调用展示商品的函数
        console.log(data);
        fun(data);
    }
};

然后function一个变量进行调用!加上下面的自己去看吧,家人们

function fun(data) {
    let arr = [];
 
    for (let i in data) {
        if (data[i].pid == 0) {
            data[i].children = []; // 初始化 children 数组
            for (let j in data) {
                if (data[j].pid == data[i].id) { // 找到当前节点的子节点
                    data[i].children.push(data[j]); // 将子节点添加到 children 数组中
                }
                data[j].childrens = [];
                for (let k in data) {
                    if (data[k].pid == data[j].id) {
                        data[j].childrens.push(data[k]);
                    }
                }
            }
            arr.push(data[i]); // 将构建好的根节点添加到 arr 中
        }
    }
 
    console.log(arr);
}
相关文章
|
搜索推荐
为什么每个公司都在做自己的OA系统,但是依然没有取代钉钉
为什么每个公司都在做自己的OA系统,但是依然没有取代钉钉
|
5月前
|
Web App开发 数据安全/隐私保护 Python
快手批量发布作品工具,自动上传视频发布软件,python实现自动脚本
这个脚本实现了快手批量上传视频的功能,包含登录、上传视频、添加描述和发布等完整流程
|
缓存 资源调度 JavaScript
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
1070 0
|
存储 Java 编译器
🔍深入Android底层,揭秘JVM与ART的奥秘,性能优化新视角!🔬
【7月更文挑战第28天】在Android开发中,掌握底层机制至关重要。从Dalvik到ART, Android通过采用AOT编译在应用安装时预编译字节码至机器码,显著提升了执行效率。ART还优化了垃圾回收,减少内存占用及停顿。为了优化性能,可减少DEX文件数量、优化代码结构利用内联等技术、合理管理内存避免泄漏,并使用ART提供的调试工具。
341 7
|
存储 弹性计算 Linux
云服务器 ECS产品使用问题之如何实现计划任务定时备份和重启
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
存储 JavaScript 安全
Node中的AsyncLocalStorage 使用问题之nestjs-cls 库提供了什么功能
Node中的AsyncLocalStorage 使用问题之nestjs-cls 库提供了什么功能
276 3
|
前端开发 iOS开发 MacOS
vscode自动跟随Mac或window系统系统切换主题色-白天用亮色主题、晚上用暗黑主题
vscode自动跟随Mac或window系统系统切换主题色-白天用亮色主题、晚上用暗黑主题
1287 0
|
Cloud Native 测试技术 开发者
阿里云服务网格ASM多集群实践(二):高效按需的应用多环境部署与全链路灰度发布
介绍服务网格ASM提出的一种多集群部署下的多环境部署与全链路灰度发布解决方案。
|
NoSQL 关系型数据库 Linux
阿里云RDS购买Linux——安装redis服务
阿里云RDS购买Linux——安装redis服务
350 0