javascript - html树形结构怎么转成对应json数据格式？

问题描述

问 题

如下：

<ul id="flowWarp" class="lm-w">
    <li class="lm-l"><a class="lm-a">金融业</a>
        <ul class="lm-u">
            <li class="lm-l"><a class="lm-a">2016金融产品投资</a>
                <ul class="lm-u">
                    <li class="lm-l"><a class="lm-a">产品投资分析1</a>
                        <ul class="lm-u">
                            <li class="flow-list lm-list">用户投资资料1</li>
                            <li class="flow-list lm-list">用户投资资料2</li>
                            <li class="flow-list lm-list">用户投资资料3</li>
                        </ul>
                    </li>
                    <li class="lm-l"><a class="lm-a">产品投资分析2</a>
                        <ul class="lm-u">
                            <li class="flow-list lm-list">用户投资资料2</li>
                            <li class="flow-list lm-list">用户投资资料3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="lm-l"><a class="lm-a">2017金融产品投资</a>
                <ul class="lm-u">
                    <li class="flow-list lm-list">用户投资资料33</li>
                    <li class="flow-list lm-list">用户投资资料19</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="lm-l"><a class="lm-a">银行业</a>
        <ul class="lm-u">
            <li class="lm-l"><a class="lm-a">2016银行产品投资</a>
                <ul class="lm-u">
                    <li class="flow-list lm-list">用户投资资料1</li>
                    <li class="flow-list lm-list">用户投资资料1</li>
                </ul>
            </li>
            <li class="lm-l"><a class="lm-a">2017银行产品投资</a>
                <ul class="lm-u">
                    <li class="flow-list lm-list">用户投资资料1</li>
                    <li class="flow-list lm-list">用户投资资料1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

转换成如下：

var arr = [{
            "id": "1",
            "text": "金融业",
            "children": [{
                "id": "1-1",
                "text": "2016金融产品投资",
                "children": [{
                    "id": "1-1-1",
                    "text": "产品投资分析1",
                    "children": [{
                        "id": "1-1-1-1",
                        "text": "用户投资资料1"
                    }, {
                        "id": "1-1-1-2",
                        "text": "用户投资资料2"
                    }, {
                        "id": "1-1-1-3",
                        "text": "用户投资资料3"
                    }]
                }, {
                    "id": "1-1-2",
                    "text": "产品投资分析2",
                    "children": [{
                        "id": "1-1-2-1",
                        "text": "用户投资资料2"
                    }, {
                        "id": "1-1-2-2",
                        "text": "用户投资资料3"
                    }]
                }]
            }, {
                "id": "1-2",
                "text": "2017金融产品投资",
                "children": [{
                    "id": "1-2-1",
                    "text": "用户投资资料33"
                }, {
                    "id": "1-2-2",
                    "text": "用户投资资料19"
                }]
            }]
        }, {
            "id": "2",
            "text": "银行业",
            "children": [{
                "id": "2-1",
                "text": "2016银行产品投资",
                "children": [{
                    "id": "2-1-1",
                    "text": "用户投资资料1"
                }, {
                    "id": "2-1-2",
                    "text": "用户投资资料1"
                }]
            }, {
                "id": "2-2",
                "text": "2017银行产品投资",
                "children": [{
                    "id": "2-2-2",
                    "text": "用户投资资料1"
                }, {
                    "id": "2-2-3",
                    "text": "用户投资资料1"
                }]
            }]
        }];

json转换成html我已经写出来了，如下：

APP.flowDataRender = function (obj, arr) {
    var str = '';
    (function insertNode (data) {
        // console.log(data);
        if (data.length>0) {
            data.map(function (item) {
                if (item.children) {
                    str += "<li class='lm-l'><a class='lm-a'>" + item.text + "</a>" + "<ul class='lm-u'>";
                    insertNode(item.children);
                    str += "</ul></li>";
                } else {
                    str += "<li class='flow-list lm-list'>" + item.text + "</li>";
                }
            });
        }
    })(arr);
    $(obj).html(str);
};

但是html转回成json写了半天也没写出，

这样的html树形结构的代码怎么转换成对应的json数据格式，然后传递给后台，感激不尽！！

解决方案

// 取得数组
function getArrByUl(ul, id) {
  var arr = [];
  var oLi = {};
  var children = ul.children;
  for (var i = 0; i < children.length; i++) {
    oLi = {
      id: id ? id + '-' + (i + 1) : i + 1,
      text: getTxtByLi(children[i]),
    }
    // 非最底层li
    if (children[i].className.search('flow-list') < 0) {
      oLi.children = getArrByUl(findNode(children[i], 'UL'), oLi.id);
    }
    arr.push(oLi);
  }
  return arr;
}

// 取得text
function getTxtByLi(li) {
  var txt = '';
  var children = li.children;
  // 是最底层li
  if (li.className.search('flow-list') >= 0) {
    txt = li.innerHTML;
  } else {
    txt = findNode(li, 'A').innerHTML;
  }
  return txt;
}

// 取得元素的某个子元素
function findNode(el, tagName) {
  for (var i = 0; i < el.children.length; i++) {
    if (el.children[i].tagName === tagName) {
      return el.children[i];
    }  
  }
}

var flowWarp = document.getElementById('flowWarp');

console.log(getArrByUl(flowWarp))

随便撸了一下，用jquery会更短一点吧。大概这个思路递归下就行了。

这篇关于javascript - html树形结构怎么转成对应json数据格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！