javascript - html树形结构怎么转成对应json数据格式？-PHP中文网问答

如下：

转换成如下：

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 += "" + item.text + "" + "";
                    insertNode(item.children);
                    str += "";
                } else {
                    str += "" + item.text + "";
                }
            });
        }
    })(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))

var root = $('#flowWarp'); var result = []; function transform(root,result,pid){ var index = 1; root.find('>').each(function(){ var id = pid ? pid + '-' + (index++) : index++; var children = []; var name = $(this).find('a').html() || $(this).text(); result.push({ id : id, name : name, children : children }); transform($(this).find('ul:first'),children,id); }); } transform(root,result);

全部回复(5)

PHP中文网2017-04-11 10:32:31 5楼

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

赞 +0

添加回复

PHP中文网2017-04-11 10:32:31 4楼

既然说jq了，来个：

阿神2017-04-11 10:32:31 3楼

请问为什么要dom转回json?

高洛峰2017-04-11 10:32:31 2楼

你的意思是要获取那些字符串，然后按你的JOSN格式放入arr里面？你这个需求分解开来，有几步：第一，获取对应的节点的字符串。第二：把获取的字符串放入多个数组（按照你例子的层级来看，要三个数组，一个数组放id=1的字符串，另一个数组放第二层级的数据，第三个类推）.第三步：创建一个多维数组（三维），然后把之前三个个数组内的数据按顺序压入数组。不知道这个思路是不是你想要的？
PS：我觉得在楼主这样的需求环境下，html转josn数据，其实就是字符串的截取，或者说就是剔除多余的东西（获取各层级的保留数据），然后按自己的规则封装数据。

阿神2017-04-11 10:32:31 1楼

既然你已经有原来的json数据了,并且已经转化为html元素展示出来了.

当用户修改了对应的html树上的内容,你只要将原来json数据中的对应位置进行修改就好了.
没必要整一个树结构再去重新组织json一遍吧.