我无法以正确的方式嵌套。它需要像嵌套对象一样嵌套。键的td和对象或if值的新td /表，它显示了一个名为/ value的表。
任何方向都会有所帮助。
json字符串是这样的：
{
"accounts": {
"demo": {
"Name": "Your Medical Clinic",
"groupid": "demo",
"CallerID": "8664738160",
"CallerID_err": "OK",
"TransferPhone": "1-931-555-1212",
"TransferPhone_err": "INVALID LENGTH",
"TimeZone": "EST",
"EMRSoftware": "Greenway",
"merlin": 1,
"prm": 1,
"CallDaysOut": 2,
"EmailDaysOut": 5,
"enablevoice": 1,
"enabletext": 1,
"enablemail": 1,
"Exclude": "12 Months,12-17 Years,18+ Years,2 Months,",
"emailBtnConfirm": 1,
"emailBtnReschedule": 1,
"emailBtnCancel": 1,
"enablenoshow": 1,
"enablecollection": 0,
"enablerecall": 1,
"enableapptalert": 1,
"AppendCallerID": "Confirm,Cancel,Resched,AnsMach",
"EmailReport": "kevin@relatient.net,john@relatient.net,hello@gim.com",
"EmailReport_err": "OK",
"SurveyReport": "chris@relatient.net",
"SurveyReport_err": "OK",
"HMReport": "john@relatient.net,kevin@relatient.net",
"HMReport_err": "OK",
"ApptReminders": {
"cronCalls": {
"cronCalls_570": {
"StartHour": 18,
"StartQtrHour": 0,
"StartTime_local": "7:00 PM EST",
"EndHour": 19,
"EndQtrHour": 0,
"EndTime_local": "8:00 PM EST",
"CallDays": "MoTuWeThFr"
}
},
"cronEmail": {
"cronEmail_110": {
"hour": 18,
"qtrhour": 99,
"StartTime_local": "INVALID EST",
"ApptTimeMath": "",
"EmailDays": "MoTuWeThFr"
}
},
"cronSMS": {
"cronSMS_82": {
"hour": 7,
"qtrhour": 0,
"StartTime_local": "8:00 AM EST",
"DaysOut": 0,
"cronargid": 1,
"cronargid_type": "frombulk",
"ApptTimeMath": "",
"WorkDays": "MoTuWeThFr",
"SendOnDays": "TuWeThFr",
"cronSMS_err": "OK"
}
}
},
"HealthMaint": {
"cronHMCalls": {
"cronHMCalls_2": {
"StartHour": 12,
"StartQtrHour": 0,
"StartTime_local": "1:00 PM EST",
"EndHour": 16,
"EndQtrHour": 0,
"EndTime_local": "5:00 PM EST",
"ActiveDays": "MoTuWeFrSa"
}
},
"cronHMEmail": {
"cronHMEmail_1": {
"hour": 3,
"qtrhour": 3,
"StartTime_local": "4:45 AM EST",
"ActiveDays": "ThFrSa"
}
},
"cronHMSMS": {
"cronHMSMS_1": {
"hour": 2,
"qtrhour": 2,
"StartTime_local": "3:30 AM EST",
"ActiveDays": "SuTuThSa"
}
}
},
"MDPay": {
"cronMDPayCalls": {
"cronMDPayCalls_2": {
"hour": 15,
"qtrhour": 3,
"StartTime_local": "4:45 PM EST",
"ActiveDays": "MoWeFr"
}
},
"cronMDPayEmail": {
"cronMDPayEmail_2": {
"hour": 13,
"qtrhour": 1,
"StartTime_local": "2:15 PM EST",
"ActiveDays": "MoFr"
}
},
"cronMDPaySMS": {
"cronMDPaySMS_2": {
"hour": 15,
"qtrhour": 1,
"StartTime_local": "4:15 PM EST",
"ActiveDays": "Su"
}
}
},
"NoShow": {
"cronNoShowCalls": { }
},
"Recall": {
"cronRecallCalls": {
"cronRecallCalls_4": {
"Hour": 11,
"QtrHour": 0,
"StartTime_local": "12:00 PM EST",
"ActiveDays": "MoTuWeThFr"
}
}
},
"cronEmailReports": {
"cronEmailReport_155": {
"hour": 20,
"qtrhour": 1,
"StartTime_local": "9:15 PM EST",
"DaysOut": 4,
"csv": 1,
"reportargid": 3,
"reportargid_type": "calltime",
"WorkDays": "SuMoTuThFrSa",
"SendOnDays": "MoTuWeThFr"
}
},
"CallCntNotStatus99": 3680,
"crontab": { },
"IncomingFiles": {
"file_1": "payments.json",
"file_1_changed": "2015-04-08 10:44",
"file_1_lines": 222,
"file_2": "recall.csv",
"file_2_changed": "2014-04-17 08:58",
"file_2_lines": 0,
"file_3": "elerts.txt",
"file_3_changed": "2014-12-11 14:14",
"file_3_lines": 21,
"file_4": "noshow.csv",
"file_4_changed": "2014-04-17 08:44",
"file_4_lines": 0,
"file_5": "daily.txt",
"file_5_changed": "2014-10-29 12:50",
"file_5_lines": 188,
"file_6": "bulk.csv",
"file_6_changed": "2014-10-20 14:41",
"file_6_lines": 1
}
}
}
}
以下是我用来创建HTML表格的代码：
// Settings :: Configuration
var jsontext = '{ "accounts" : { "demo": { "Name": "Your Medical Clinic", "groupid": "demo", "CallerID": "8664738160", "CallerID_err": "OK", "TransferPhone": "1-931-555-1212", "TransferPhone_err": "INVALID LENGTH", "TimeZone": "EST", "EMRSoftware": "Greenway", "merlin": 1, "prm": 1, "CallDaysOut": 2, "EmailDaysOut": 5, "enablevoice": 1, "enabletext": 1, "enablemail": 1, "Exclude": "12 Months,12-17 Years,18+ Years,2 Months,", "emailBtnConfirm": 1, "emailBtnReschedule": 1, "emailBtnCancel": 1, "enablenoshow": 1, "enablecollection": 0, "enablerecall": 1, "enableapptalert": 1, "AppendCallerID": "Confirm,Cancel,Resched,AnsMach", "EmailReport": "kevin@relatient.net,john@relatient.net,hello@gim.com", "EmailReport_err": "OK", "SurveyReport": "chris@relatient.net", "SurveyReport_err": "OK", "HMReport": "john@relatient.net,kevin@relatient.net", "HMReport_err": "OK", "ApptReminders" : { "cronCalls": { "cronCalls_570": { "StartHour": 18, "StartQtrHour": 0, "StartTime_local": "7:00 PM EST", "EndHour": 19, "EndQtrHour": 0, "EndTime_local": "8:00 PM EST", "CallDays": "MoTuWeThFr" } }, "cronEmail": { "cronEmail_110": { "hour": 18, "qtrhour": 99, "StartTime_local": "INVALID EST", "ApptTimeMath": "", "EmailDays": "MoTuWeThFr" } }, "cronSMS": { "cronSMS_82": { "hour": 7, "qtrhour": 0, "StartTime_local": "8:00 AM EST", "DaysOut": 0, "cronargid": 1, "cronargid_type": "frombulk", "ApptTimeMath": "", "WorkDays": "MoTuWeThFr", "SendOnDays": "TuWeThFr", "cronSMS_err": "OK" } } }, "HealthMaint" : { "cronHMCalls": { "cronHMCalls_2": { "StartHour": 12, "StartQtrHour": 0, "StartTime_local": "1:00 PM EST", "EndHour": 16, "EndQtrHour": 0, "EndTime_local": "5:00 PM EST", "ActiveDays": "MoTuWeFrSa" } }, "cronHMEmail": { "cronHMEmail_1": { "hour": 3, "qtrhour": 3, "StartTime_local": "4:45 AM EST", "ActiveDays": "ThFrSa" } }, "cronHMSMS": { "cronHMSMS_1": { "hour": 2, "qtrhour": 2, "StartTime_local": "3:30 AM EST", "ActiveDays": "SuTuThSa" } } }, "MDPay" : { "cronMDPayCalls": { "cronMDPayCalls_2": { "hour": 15, "qtrhour": 3, "StartTime_local": "4:45 PM EST", "ActiveDays": "MoWeFr" } }, "cronMDPayEmail": { "cronMDPayEmail_2": { "hour": 13, "qtrhour": 1, "StartTime_local": "2:15 PM EST", "ActiveDays": "MoFr" } }, "cronMDPaySMS": { "cronMDPaySMS_2": { "hour": 15, "qtrhour": 1, "StartTime_local": "4:15 PM EST", "ActiveDays": "Su" } } }, "NoShow" : { "cronNoShowCalls": { } }, "Recall" : { "cronRecallCalls": { "cronRecallCalls_4": { "Hour": 11, "QtrHour": 0, "StartTime_local": "12:00 PM EST", "ActiveDays": "MoTuWeThFr" } } }, "cronEmailReports": { "cronEmailReport_155": { "hour": 20, "qtrhour": 1, "StartTime_local": "9:15 PM EST", "DaysOut": 4, "csv": 1, "reportargid": 3, "reportargid_type": "calltime", "WorkDays": "SuMoTuThFrSa", "SendOnDays": "MoTuWeThFr" } }, "CallCntNotStatus99": 3680, "crontab": { }, "IncomingFiles": { "file_1": "payments.json", "file_1_changed": "2015-04-08 10:44", "file_1_lines": 222, "file_2": "recall.csv", "file_2_changed": "2014-04-17 08:58", "file_2_lines": 0, "file_3": "elerts.txt", "file_3_changed": "2014-12-11 14:14", "file_3_lines": 21, "file_4": "noshow.csv", "file_4_changed": "2014-04-17 08:44", "file_4_lines": 0, "file_5": "daily.txt", "file_5_changed": "2014-10-29 12:50", "file_5_lines": 188, "file_6": "bulk.csv", "file_6_changed": "2014-10-20 14:41", "file_6_lines": 1 } } }}
',
obj = JSON.parse(jsontext),
path = '',
table = $('#configurationTable'),
parent = '';
console.log(obj);
// if no object available, rerturn false
if (typeof obj !== 'object') {
console.log('error');
return false;
}
$.each(obj, lp);
// Build Table
function lp(key, val) {
var savepath = path;
path = path ? (path + "-" + key) : key;
// create table structure
var struct = path,
structArr = path.split('-'),
length = (structArr.length > 2) ? structArr.length - 1 : structArr.length,
last = '';
// recursion for children
if (val !== null && typeof val === "object") {
for (var v in structArr) {
if (last != '') {
last = $('table.' + structArr[v], last);
if (last.length == 0) {
console.log(parent);
parent.append('<b>' + structArr[v] + '</b><table class="' + structArr[v] + '"><tr></tr></table>');
parent = $('.' + structArr[v], parent);
} else {
}
} else {
last = $('table.' + structArr[v], table);
if (last.length == 0) {
table.append('<b>' + structArr[v] + '</b><table class="' + structArr[v] + '"><tr></tr></table>');
parent = $('.' + structArr[v], table);
}
}
}
// Recursion
$.each(val, lp);
}
// Show values per div
else {
$(parent).append('<tr><td class="name">' + key + '</td><td class="value">' + val + '</td></tr>');
}
path = savepath;
}
$('.jsonConfig').html(table);<h3>Configuration JSON</h3>
<div class="form_panel jsonConfig">
<table id="configurationTable"></table>
</div>
答案 0 :(得分：0)
**错误的响应已删除**
好的，经过一段时间的代码，我有点想通了（我想）为什么你出错了。原因是，在检查变量last的值以查看是否还有要创建的子表的条件下查看此Pastebin，您正在执行追加。 .append()函数会编辑选择器元素的值，并将所选文本添加到其中。它不会在您选择的元素旁边（之后）添加您选择的文本。
因此，您将获得100％嵌套的表格式，而不是根据您的JSON结构进行系统嵌套。即this{ this{ this{ this{ this{} } } } }而非this{ this{ this{} this{} } this{ this{} this{} this{} } this{ this{} } }等。大声笑xP
我建议您使用类似.after()或.insertAfter()函数的内容，以确保在最后一个子项中添加下一个表并且不附加到标记。
我希望这会有所帮助。