JavaScript怎么使用递归将后台json数据转换成树结构

JavaScript014

JavaScript怎么使用递归将后台json数据转换成树结构,第1张

json的“亲爸”就是JavaScript，还用转吗？

有2种方法直接使用json数据：

var jsonObject = eval("(" + jsonString + ")")

var jsonObject = JSON.parse(jsonString)

如果你想遍历转换后的json对象，可以用for in语句，具体用法请查阅JavaScript API。

你好，我给你写了一个函数：

function nodeTree(node) {

    var root = node.tagName,

        tree = '<span style="color:#fff">' + root + '</span><br>',

        output = '',

        kcolors = ['#cc99cc', '#78dead', '#3ba264', '#ffcc54'],

        vcolors = ['#bb512d', '#6798e8', '#f3825b', '#c1cff4']

    function listObj(obj, _root) {

        var first = true,

            root = _root

        for (var k in obj) {

            if (first) {

                root += '::' + k

                first = false

            }

            var deep = root.split('::').length - 1,

                v = typeof(obj[k]) == 'function' || typeof(obj[k]) == 'string' || ('' + obj[k]).indexOf('function') === 0 ? typeof(obj[k]) : obj[k]

            tree += '<span class="gray">&nbsp&nbsp&nbsp' + '|....'.repeat(deep - 1) + '|.. </span><span style="color:' + kcolors[deep - 1] + '">' + k + '</span>: <span style="color:' + vcolors[deep - 1] + '">' + v + '</span><br>'

            if ((Object.prototype.toString.call(obj[k]) === '[object Object]' || Object.prototype.toString.call(obj[k]).match(/^\[object\sHTML[^I]/)) && deep < 3) {

                listObj(obj[k], root)

            }

        }

        return tree

    }

    tree = listObj(node)

    document.body.style.backgroundColor = '#2d2d2d'

    document.body.style.color = '#fff'

    document.body.innerHTML = tree

}

使用方法很简单，打开任意页面，在控制台先执行上面的函数声明，然后调用函数显示指定节点的属性列表：

nodeTree(document.body) // or

nodeTree(document.getElementsByTagName('div')[0])

返回结果直接就会覆盖body中的内容，并高亮缩进显示，查看非常方便

递归显示内容比较多，执行会略慢，现在控制在显示三级，调用时需略作等待

希望是你想要的结果，望采纳~~

$(function () {

$("#btn_bianli").click(function () {

var showlist = $("<ul></ul>")

showall(menulist.menulist, showlist)

$("#div_menu").append(showlist)

})

})

//menu_list为json数据

//parent为要组合成html的容器

function showall(menu_list, parent) {

for (var menu in menu_list) {

//如果有子节点，则遍历该子节点

if (menu_list[menu].menulist.length >0) {

//创建一个子节点li

var li = $("<li></li>")

//将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

$(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent)

//将空白的ul作为下一个递归遍历的父亲节点传入

showall(menu_list[menu].menulist, $(li).children().eq(0))

}

//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

else {

$("<li></li>").append(menu_list[menu].MName).appendTo(parent)

}

}

}