转换无序列表html <ul> 递归调用子列表到json数组

Question

I'm trying to create an efficient method in javascript to convert with jquery (and bootstrap if you have some snippet), a unordered HTML list 我正在尝试在javascript中创建一种有效的方法来与jquery（如果有一些代码段，则进行引导）进行转换，这是一个无序的HTML列表

to a JSON array.

到JSON数组。

I put an example for make myself clearer:

我举一个例子让自己更加清晰：

Html test HTML测试

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div id="treeview"> <ul class="menu_level0_container list-group mymenu"> <li class="menu_level0 menu_level0_hasChildren" id="Test1_listElement"><a href="/test1" class="menu_level0_link menu_level0_link_hasChildren " id="Test1">test1</a> <ul class="menu_level1_container " id="Test1_sub"> <li class="menu_level1 " id="test11_listElement"><a href="/test11" class="menu_level1_link " id="test11">test11</a></li> <li class="menu_level1 " id="test12_listElement"><a href="/test12" class="menu_level1_link " id="test12">test12</a></li> <li class="menu_level1 last1 " id="test13_listElement"><a href="/test13" class="menu_level1_link " id="test13">test13</a></li> </ul> </li> <li class="menu_level0 menu_level0_hasChildren" id="test2_listElement"><a href="/test2" class="menu_level0_link menu_level0_link_hasChildren " id="test2">test2</a> <ul class="menu_level1_container " id="test2_sub"> <li class="menu_level1 " id="test21_listElement"><a href="/test21" class="menu_level1_link " id="test21">test21</a></li> <li class="menu_level1 " id="test22_listElement"><a href="/test22" class="menu_level1_link " id="test22">test22</a></li> <li class="menu_level1 last1 " id="test23_listElement"><a href="/test23" class="menu_level1_link " id="test23">test23</a></li> </ul> </li> <li class="menu_level0 last0 " id="test3_listElement"><a href="/test3" class="menu_level0_link " id="test3">test3</a></li> </ul> </div> </body>

Here the script i made so far but , is not very good and have some errors i can't figure out how to solve: 这是我到目前为止制作的脚本，但不是很好，并且有一些错误，我不知道如何解决：

 <script> var data = []; function walk4(nodes, data) { if (!nodes) { return; } nodes.find("li").each(function (id, node) { console.log('(' + id + ')Node:' + JSON.stringify(node, null, 0)); var text = jQuery(this).contents().get().map(function (n) { return n.nodeType === 3 ? n.textContent.trim() : ''; }).join(''); //get current node text var obj = { id: id, text: text, tags: [jQuery(this).children > 0 ? jQuery(this).children + ' child elements' : ''] }; if(jQuery(this).has("ul")){ obj.nodes = []; walk4(jQuery(this).find("ul"), obj.nodes); //recursive call } console.log('(' + id + ')OBJ:' + JSON.stringify(obj, null, 0)); data.push(obj); }); } var nodes = $("#treeview").find("ul"); walk4(nodes,data); console.log(JSON.stringify(data,null,0)); //here my json array </script>

What i want it's the "data" variabile set with this result: 我想要的是具有此结果的“数据”可变性集：

 [ {text: 'test1', textHtml: '<a href="/test1" class="menu_level0_link menu_level0_link_hasChildren " id="Test1">test1</a>', href:'/test1', nodes: [ {id:'test11',text: 'test11', textHtml: '<a href="/test11" class="menu_level1_link " id="test11">test11</a>', href:'/test11', tags['0']}, {id:'test12',text: 'test12', textHtml: '<a href="/test12" class="menu_level1_link " id="test12">test12</a>', href:'/test12', tags['0']}, {id:'test13',text: 'test13', textHtml: '<a href="/test13" class="menu_level1_link " id="test13">test13</a>', href:'/test13',tags['0']} ], tags['3']}, {text: 'test2', textHtml: '<a href="/test2" class="menu_level0_link menu_level0_link_hasChildren " id="Test2">test2</a>', href:'/test2', nodes: [ {id:'test21',text: 'test21', textHtml: '<a href="/test21" class="menu_level1_link " id="test21">test21</a>', href:'/test21', tags['0']}, {id:'test22',text: 'test22', textHtml: '<a href="/test22" class="menu_level1_link " id="test22">test22</a>', href:'/test22', tags['0']}, {id:'test23',text: 'test23', textHtml: '<a href="/test23" class="menu_level1_link " id="test23">test23</a>', href:'/test23', tags['0']} ], tags['3']}, {text: 'test3', textHtml:'<a href="/test3" class="menu_level0_link " id="test3">test3</a>', href:'/test3', tags['0']} ]

NOTE: not very important the structure of the JSON, I just want to convert all the info in a HTML unordered list to a JSON array. 注意：JSON的结构不是很重要，我只想将HTML无序列表中的所有信息都转换为JSON数组。

I will try to update this question by myself when i will found a solution , but if anyone has some advise is more than welcome. 找到解决方案后 ， 我将尝试自行更新此问题 ，但是如果有人提出建议，我们将非常欢迎。

Ty in advance for any help. 请提前寻求任何帮助。

UPDATE (Suggestion from guest271314) : NOw the JSON result is: UPDATE（来自guest271314的建议） ：现在，JSON结果为：

 [ {"id":0,"text":"","tags":["2 child elements"], "nodes":[ {"id":0,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":1,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":2,"text":"","tags":["1 child elements"],"nodes":[]} ]}, {"id":1,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":2,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":3,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":4,"text":"","tags":["2 child elements"], "nodes":[ {"id":0,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":1,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":2,"text":"","tags":["1 child elements"],"nodes":[]} ]}, {"id":5,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":6,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":7,"text":"","tags":["1 child elements"],"nodes":[]}, {"id":8,"text":"","tags":["1 child elements"],"nodes":[]} ]

Some error on the code can't get the text current node (it's different from the innerText of the node) 代码上的某些错误无法获取文本当前节点（与节点的innerText不同）
duplicate object, the children already present in a parent array "nodes" must not be re-appear. 如果对象是重复对象，则不能重新出现在父数组“节点”中的子对象。

Answer 1

.childElementCount is not a jQuery method. .childElementCount不是jQuery方法。 Substitute .children().length for .childElementCount 用.childElementCount .children().length代替.childElementCount

 var data = []; function walk4(nodes, data) { if (!nodes) { return; } nodes.find("li").each(function (id, node) { console.log('(' + id + ')Node:' + JSON.stringify(node, null, 0)); var text = jQuery(this).contents().get().map(function (n) { return n.nodeType === 3 ? n.textContent.trim() : ''; }).join(''); //get current node text var obj = { id: id, text: text, tags: [jQuery(this).children().length > 0 ? jQuery(this).children().length + ' child elements' : ''] }; if(jQuery(this).has("ul")){ obj.nodes = []; walk4(jQuery(this).find("ul"), obj.nodes); //recursive call } console.log('(' + id + ')OBJ:' + JSON.stringify(obj, null, 0)); data.push(obj); }); } var nodes = $("#treeview").find("ul"); walk4(nodes,data); console.log(JSON.stringify(data,null,0)); //here my json array

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div id="treeview"> <ul class="menu_level0_container list-group mymenu"> <li class="menu_level0 menu_level0_hasChildren" id="Test1_listElement"><a href="/test1" class="menu_level0_link menu_level0_link_hasChildren " id="Test1">test1</a> <ul class="menu_level1_container " id="Test1_sub"> <li class="menu_level1 " id="test11_listElement"><a href="/test11" class="menu_level1_link " id="test11">test11</a></li> <li class="menu_level1 " id="test12_listElement"><a href="/test12" class="menu_level1_link " id="test12">test12</a></li> <li class="menu_level1 last1 " id="test13_listElement"><a href="/test13" class="menu_level1_link " id="test13">test13</a></li> </ul> </li> <li class="menu_level0 menu_level0_hasChildren" id="test2_listElement"><a href="/test2" class="menu_level0_link menu_level0_link_hasChildren " id="test2">test2</a> <ul class="menu_level1_container " id="test2_sub"> <li class="menu_level1 " id="test21_listElement"><a href="/test21" class="menu_level1_link " id="test21">test21</a></li> <li class="menu_level1 " id="test22_listElement"><a href="/test22" class="menu_level1_link " id="test22">test22</a></li> <li class="menu_level1 last1 " id="test23_listElement"><a href="/test23" class="menu_level1_link " id="test23">test23</a></li> </ul> </li> <li class="menu_level0 last0 " id="test3_listElement"><a href="/test3" class="menu_level0_link " id="test3">test3</a></li> </ul> </div> </body>

转换无序列表html <ul> 递归调用子列表到json数组

问题描述

1 个解决方案

解决方案1
0 2016-07-01 15:27:44

转换无序列表html <ul> 递归调用子列表到json数组

问题描述

1 个解决方案

解决方案1 0 2016-07-01 15:27:44

解决方案1
0 2016-07-01 15:27:44