js遍历<ul><li>树结构菜单生成字典？列表。如何进行遍历生成

Question

后端传来的数据为：

Data={'a': {'b': {'c': {'j':{'i':{}}},'e':{}}}} 



```前端生成树结构：

```html
<ul id="GYUW">
        <li>a <ul>
        <li>b <ul>
        <li>c <ul>
        <li>j <ul>
        <li>i</li></ul></li></ul></li>
         <li>e</li></ul></li></ul></li></ul>

由于前端树结构为可编辑，ul和li的位置可以变更，也就是动态的。
现在在设计当按下保存按钮时，通过js遍历生成json或者字典 回传给后端进行保存

Answer 1

2个转斗使用递归

JSON转DOM

<script>
    Data = {
        'a': {
            'b': {
                'c':
                {
                    'j': { 'i': {} }
                },
                'e': {}
            }
        }
    }
    function buildHtml(item) {
        var s = '<ul>';
        for (var attr in item) {
            s += `<li>${attr}${Object.keys(item[attr]).length ? buildHtml(item[attr]): ''}</li>`
        }
        s += '</ul>';
        return s;
    }
    document.write(buildHtml(Data))
</script>

DOM专为JSON

<ul id="GYUW">
    <li>
        a <ul>
            <li>
                b <ul>
                    <li>
                        c <ul>
                            <li>
                                j <ul>
                                    <li>i</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>e</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<script> 
    var data = {}
    function setJSON(uls, data) {
        for (var ul of uls) {
            var lis = ul.querySelectorAll(':scope>li');
            for (var li of lis) {
                var text = li.firstChild.nodeValue.replace(/^\s+|\s+$/g, '');//注意修改这里 如果先的文本放在其他容器中
                data[text] = {};
               setJSON(li.querySelectorAll(':scope>ul'), data[text]);
            }
        }
    }
    setJSON([document.getElementById('GYUW')], data);
    console.log(JSON.stringify(data, null, 2))
 
</script>