如何将<ul> <li>树转换为JSON树？

Question

我想转换此列表：

  <li>
    <a href="http://site.ru/cabinet/vidos-1" data-image="assets/images/programs/ai.jpg">Видос 1</a>
    <ul>
      <li><a href="http://site.ru/cabinet/vidos-4" data-image="assets/images/programs/ek.jpg">Видос 4</a></li>
      <li><a href="http://site.ru/cabinet/vidos-5" data-image="assets/images/programs/vs.jpg">Видос 5</a></li>
      <li><a href="http://site.ru/cabinet/vidos-6" data-image="assets/images/programs/lz.jpg">Видос 6</a></li>
    </ul>
  </li>
  <li>
    <a href="http://site.ru/cabinet/vidos-2" data-image="assets/images/test/woodhouse.png">Видос 2</a>
  </li>
  <li>
    <a href="http://site.ru/cabinet/vidos-3" data-image="assets/images/test/sterling.png">Видос 3</a>
    <ul>
      <li>
        <a href="http://site.ru/cabinet/vidos-7" data-image="assets/images/test/pam.png">Видос 7</a>
        <ul>
          <li>
            <a href="http://site.ru/cabinet/vidos-8" data-image="assets/images/test/malory.png">Видос 8</a>
            <ul>
              <li>
                <a href="http://site.ru/cabinet/vidos-9" data-image="">Видос 9</a>
              </li>
              <li>
                <a href="http://site.ru/cabinet/vidos-10" data-image="assets/images/test/figgs.png">Видос 10</a>
                <ul>
                  <li>
                    <a href="http://site.ru/cabinet/vidos-11" data-image="assets/images/test/cheryl.png">Видос 11</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>

（也可以看作）：

LI
    A
    UL
        LI
            A
        LI
            A
        LI
            A
LI
    A
LI
    A
    UL
        LI
            A
            UL
                LI
                    A
                    UL
                        LI
                            A
                        LI
                            A
                            UL
                                LI
                                    A

到JSON树：

{//li
    a: '',
    ul: [
        {//li
            a: ''
        },
        {//li
            a: ''
        },
        {//li
            a: ''
        }
    ]
},
{//li
    a: ''
},
{//li
    a: '',
    ul: [
        {//li
            a: '',
            ul: [
                {//li
                    a: '',
                    ul: [
                        {//li
                            a: ''
                        },
                        {//li
                            a: '',
                            ul: [
                                {//li
                                    a: ''
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

怎么做？

我有这个函数用于递归循环列表，但是我不知道如何应用它们来构建我的JSON数组：

var nodeStructure = {
    pseudo: true,
    children: [] // I want to insert my JSON inside this array
};

function buildStructure(node) {
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        buildStructure1(c[i], 0);
    }
}

function buildStructure1(node, depth) {
    ++depth;
    //txt = depth + node.nodeName + "<br>";
    var c = node.children;
    var i;
    for (i = 0; i < c.length; i++) {
        //txt = c[i].nodeName + "<br>";
        buildStructure1(c[i], depth);
    }
}

buildStructure(document.querySelector('ul#divtree'));

如何在我的情况下使用它们？

Answer 1

有很多开源项目可以帮到你。试试这个吗？ https://github.com/metatribal/xmlToJSON

Answer 2

我写了它！很难，但我有成功

var nodeStructure = {
    pseudo: true,
    children: []
};

function buildStructure(node, parent) {
    var c = node.children;
    for (var i = 0; i < c.length; i++) {
        if (c[i].nodeName == 'LI') {
            parent.push({});
            var sc = c[i].children;
            for (var j = 0; j < sc.length; j++) {
                if (sc[j].nodeName == 'A') parent[i]['a'] = '';
                else if (sc[j].nodeName == 'UL') {
                    parent[i]['ul'] = [];
                    buildStructure(sc[j], parent[i]['ul']);
                }
            }
        }
    }
}

buildStructure(document.querySelector('#divtree > ul'), nodeStructure.children);
// Debug:
// document.write('<pre>'+JSON.stringify(nodeStructure.children)+'</pre>');