JSON与Jquery的递归循环问题
IM有这样的JSON字符串
[{"group_id":"1","group_name":"coupler system","subgroups":[{"group_id":"9","group_name":"core","subgroups":0},{"group_id":"10","group_name":"dual","subgroups":0}]},{"group_id":"2","group_name":"powersource\/engine","subgroups":[{"group_id":"11","group_name":"petrol","subgroups":[{"group_id":"13","group_name":"ECO-whisper","subgroups":[{"group_id":"15","group_name":"yes","subgroups":0},{"group_id":"16","group_name":"no","subgroups":0}]}]},{"group_id":"12","group_name":"electric","subgroups":[{"group_id":"14","group_name":"mains","subgroups":[{"group_id":"17","group_name":"220V","subgroups":0},{"group_id":"18","group_name":"110V","subgroups":0}]}]}]},{"group_id":"3","group_name":"tool connections","subgroups":[{"group_id":"19","group_name":"1(STO)","subgroups":0},{"group_id":"20","group_name":"2(MTO)","subgroups":0}]},{"group_id":"4","group_name":"oil content","subgroups":[{"group_id":"21","group_name":"2L?","subgroups":0},{"group_id":"22","group_name":"4L?","subgroups":0},{"group_id":"23","group_name":"6L?","subgroups":0}]},{"group_id":"5","group_name":"hose reels","subgroups":[{"group_id":"24","group_name":"no","subgroups":0},{"group_id":"25","group_name":"yes","subgroups":0}]},{"group_id":"6","group_name":"tool support + carry","subgroups":[{"group_id":"29","group_name":"no","subgroups":0},{"group_id":"30","group_name":"yes","subgroups":[{"group_id":"31","group_name":"wheelset","subgroups":[{"group_id":"32","group_name":"yes","subgroups":0},{"group_id":"33","group_name":"no","subgroups":0}]}]}]},{"group_id":"7","group_name":"weight","subgroups":[{"group_id":"34","group_name":"<=15?","subgroups":0},{"group_id":"35","group_name":"<=25?","subgroups":0},{"group_id":"36","group_name":"<=50?","subgroups":0},{"group_id":"37","group_name":"<=100?","subgroups":0}]},{"group_id":"8","group_name":"dimensions","subgroups":[{"group_id":"38","group_name":"SR10","subgroups":0},{"group_id":"39","group_name":"SR20","subgroups":0},{"group_id":"40","group_name":"SR31\/32","subgroups":0},{"group_id":"41","group_name":"SR40","subgroups":0},{"group_id":"42","group_name":"SR41\/42","subgroups":0}]}] 我需要使用Jquery将此JSON设置为有效的HTML表结构，如下所示，我该如何实现它 
这就是我到目前为止所尝试过的..我对递归循环部分感到震惊
$(document).ready(function(){ var jsondata = jQuery.parseJSON($.trim($('#groupdata').html())); //the above JSON var str = ''; str +=''; str +=''; for(j=0;j<jsondata.length;j++){ str +=''+jsondata[j]['group_name']+' '; // here i want to call the same loop again if it has subgroups } str +=' '; str+='
'; $('#container').html(str); });
这有三个部分：
- 怎么做递归
- 如何构建HTML
- 如何用jQuery做到这一点
当你有这样的东西时，你需要（a）简化（b）将其分解成它的部分。 使用更简单的数据来计算递归并构建一些HTML。 当它工作时，引入您的实际数据的子集，使其工作，等等。
粗略的模板。 我会用这个json：
var json = '[{ "first": "1", "second": "2", "sub": 0 },{ "first": "3", "second": "4", "sub": [{ "first": "3.1", "second": "3.2", "sub": 0 }] }]';
要做递归，你必须将“行构建器”分解为一个单独的函数，以便在需要时调用它自己。
类似下面的东西。 您将不得不使用它来处理您自己的数据，将html调整为您想要的等等。您需要做的第一件事就是理解它。
我不假装这是完美的，可能会有性能改进，但这应该让你朝着正确的方向前进…快乐解析……
$(document).ready(function () { var data = $.parseJSON(json); var html = ""; var rows = recurse(data); html += rows + "
"; document.write(html); }); function recurse(data) { var row = ""; for (var e in data) { //each object at this level row += ""; row += "" + data[e].first + " "; row += "" + data[e].second + " "; row += ""; if (data[e].sub.length == 1) { var sub = ""; sub += recurse(data[e].sub) sub += "
"; row += sub; } row += " "; } return row; }
你可以从摆脱for循环和利用Jquery .each（）函数开始。 为了让你开始尝试这样的事情。 v =当前节点的值，k =当前密钥
$jQuery.each(jsondata, function(k, v) { create(k, v, 0) }); function create(k, v, n) { //print your table the way you want it //if the value is an object, loop through each instance of the subcategories if(v instanceof Object) { $.each(v, function(key, val, n) { create(key, val, n+1) }); } return; }
您需要填充空白以使行/列按照您希望的方式进行，但这是一个模板，用于执行递归调用来解析Object。 如果你需要这样一个变量，n var用于检查递归的深度，我认为你可能会尝试做什么。 n = 0是顶部，n = 1将是一个级别，n = 2将是两个级别等等…
递归需要函数。 所以，建立一个：
function generateTableMarkup(data) { for (var i=0; i