js对返回的json数据进行树状划分

最新推荐文章于 2023-07-04 16:36:30 发布

原创最新推荐文章于 2023-07-04 16:36:30 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #json

js 同时被 3 个专栏收录

78 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

json

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript和AJAX技术从服务器获取JSON数据，并将其解析为多级菜单的方法。通过递归地检查每个元素的parentId属性来组织数据结构，实现了一、二、三级菜单的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 $.ajax({
    type: "get",
    url: 'data.json',
    success:function(data){
    var jsondata = JSON.parse(data); //返回的数据是json字符串,把它转换成json对象,如果是json对象则不需转换
    var topArr = []; //声明一个数组，存储所有的json数据
    for (var i = 0; i< jsondata.length; i++) {
        if (jsondata[i].parentid == 0) {
            jsondata[i].data = []; //给一级菜单下面添加data数据，存放二级菜单
            topArr.push(jsondata[i]);  //得到一级菜单
        }
    }

    for (var j = 0; j < topArr.length; j++) {
       for (var i = 0; i < jsondata.length; i++) {
           if (jsondata[i].parentid == topArr[j].id) {
               jsondata[i].data = [];
               topArr[j].data.push(jsondata[i]);  //把获取的二级菜单存放到一级菜单的data对象中
           }
       }
   }

    for (var j = 0; j < topArr.length; j++) {
        for (var m = 0; m < topArr[j].data.length; m++) {
            for (var i = 0; i < jsondata.length; i++) {
                if (jsondata[i].parentid == topArr[j].data[m].id)    {
                   topArr[j].data[m].data.push(jsondata[i]); //把获取的三级菜单存放到二级菜单的data对象中
                }
            }
        }
    }

    }
});