原生JS递归生成树状图，且映射到dom上

由于是老项目，且php嵌套的项目，没有插件，只能原生，不知道有多少个children,且所有的value是唯一的，所以就想到了递归。

一、数据大概就是这个样子

二、JS递归生成树状图

 var dataRes = {数据};
 	// var dataRes =<?php print_r($output['oRes']) ?>;
    // console.log(dataRes, '电商')
    $(function() {
        getData(dataRes);
        $('#dianshang_jq').append(menus);
    })
    var menus = ''
    function getData(arr) {
        if (arr.length > 0) {
            for (var i in arr) {
                menus += `<div class="dianshang_list" id="dianshang_list` + arr[i].value + `"><div class="dianshang_listBox_title"><div class="dianshang_listBox_btn"><div><input type="checkbox" name='checkedBox` + arr[i].value + `'></div></div><div class="dianshang_listBox_name"  οnclick="showList(` + arr[i].value + `)"  id="dianshang_listBox_title` + arr[i].value + `">` + arr[i].label + `</div></div><div class="dianshang_listBox_chirld" style="display: none;" id="dianshang_listBox_chirld` + arr[i].value + `">`;
                if (arr[i].children != false) {
                    getData(arr[i].children);
                }
                menus += `</div></div>`;
            }
        }
    }

三、css

.dianshang{
    padding: 10px;
    background: #F5F7FA;
}
.dianshang_list{
    /* padding: 0 20px; */
    /* display: none; */
}
.dianshang_listBox{

}
.dianshang_listBox_title{
    display: flex;
    line-height: 30px;
    font-size: 14px;
}

.dianshang_listBox_btn{
    width: 20px;
    height: 30px;
    line-height: 30px;
    display: none;
}
.dianshang_listBox_btn div{
    width: 20px;
    height: 15px;
    line-height: 30px;
    padding: 8px 0;
}
.dianshang_listBox_name{
    cursor:pointer; cursor:hand
}
.dianshang_listBox_chirld{
    padding: 0 0 0 30px;
}

四、效果

五、总结

一直出错的原因就在于子级判断的位置判断有问题，写在里面就没那么多麻烦事了

                if (arr[i].children != false) {
                    getData(arr[i].children);
                }