0

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 表结构，我该如何实现它 在此处输入图像描述

这是我迄今为止尝试过的......我对递归循环部分感到震惊

  <script type="text/javascript">
        $(document).ready(function(){
           var jsondata = jQuery.parseJSON($.trim($('#groupdata').html())); //the above JSON

           var str = '';
           str +='<table>';
           str +='<tr>';




             for(j=0;j<jsondata.length;j++){



                 str +='<td>'+jsondata[j]['group_name']+'</td>';
        // here i want to call the same loop again if it has subgroups


             }
             str +=' </tr>';
             str+='</table>';
             $('#container').html(str);
        });
    </script>
4

3 回答 3

4

您可以从摆脱 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;
}

您将需要填补空白以使行/列按照您想要的方式制作，但这是一个如何进行递归调用以解析对象的模板。如果您需要这样的变量，则 n var 用于检查递归的深度，我认为您可能会尝试这样做。n=0 是顶部，n=1 是一层，n=2 是两层，等等...

于 2012-08-03T04:05:53.210 回答
3

这包括三个部分：

  • 如何进行递归
  • 如何构建 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 = "<table>";
    var rows = recurse(data);
    html += rows + "</table>";
    document.write(html);
});

function recurse(data) {
    var row = "";
    for (var e in data) { //each object at this level
        row += "<tr>";
        row += "<td>" + data[e].first + "</td>";
        row += "<td>" + data[e].second + "</td>";
        row += "<td>";
        if (data[e].sub.length == 1) {
            var sub = "<table>";
            sub += recurse(data[e].sub)
            sub += "</table>";
            row += sub;
        }
        row += "</td></tr>";
    }
    return row;
}
于 2012-08-03T04:57:01.480 回答
0

递归需要函数。因此，构建一个：

function generateTableMarkup(data) {
    for (var i=0; i<data.length; i++) {
        // do something
        if (data[i].subgroups) {
            generateTableMarkup(data[i].subgroups);
        }
    }
}
generateTableMarkup(JSON.parse(...));
于 2012-08-03T04:31:20.773 回答