javascript - 一个json遍历递归的问题？

问题描述

问 题

  var recData = [{
            "id": "1",
            "name": "\u603b\u88c1",
            "pid": "0",
            "child": [{
                "id": "2",
                "name": "\u526f\u603b\u88c1",
                "pid": "1",
                "child": [{
                    "id": "3",
                    "name": "\u90e8\u95e8\u603b\u76d1",
                    "pid": "2",
                    "child": [{
                        "id": "4",
                        "name": "\u5927\u533a\u603b\u76d1",
                        "pid": "3",
                        "child": [{
                            "id": "5",
                            "name": "\u603b\u76d1",
                            "pid": "5",
                            "child": []
                        }]
                    }]
                }]
            }]
        }];

根据这个json结构 做一个图片这样的DOM结构？？

目前不清楚当有子集的情况下怎样插入li中。

  function deptList(data, pid) {
        var html = '';
        for (var i = 0; i < data.length; i++) {
            var getChild = data[i].child,
                getId = data[i].id,
                getName = data[i].name,
                getPid = data[i].pid;
            var temp = '<li data-id="' + getId + '" data-pid="' + getPid + '"> <span class="job-title"><strong class="On">'+getName +'</strong></span> </li>';

            if (getChild) {
                //判断有子集的情况
                //
            } else {
                html += temp;
                html += deptList(getChild);
            }
        }
        return html;
    }
    
    var temp = deptList(recData, 0);//recData 是伪造静态数据
    console.log(temp)

解决方案

function createTree(json) {
    let str = '<ul>';
    json.forEach(function(item) {
        str += '<li data-id=' + item.id + ' data-pid=' + item.pid + '><span class="job-title"><strong class="On">' + item.name + '</strong></span></li>';
        if (item.child) {
            str += createTree(item.child);
        }
    })
    str += '</ul>';
    return str
}

这篇关于javascript - 一个json遍历递归的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！