[英]JSON Recursive looping issue with 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表結構,如下所示,我如何實現它
這是我到目前為止嘗試過的..im遞歸循環部分
<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>
您可以從擺脫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將是兩個級別,依此類推...
這包括三個部分:
當您遇到這樣的事情時,您需要(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;
}
遞歸需要功能。 因此,構建一個:
function generateTableMarkup(data) {
for (var i=0; i<data.length; i++) {
// do something
if (data[i].subgroups) {
generateTableMarkup(data[i].subgroups);
}
}
}
generateTableMarkup(JSON.parse(...));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.