Javascript 尝试从JSON创建多个表；表「；阻碍
下午好。我试图完成的是使用发送给我的JSON创建表。如果JSON文件包含表的单个块，则一切正常。但是，多个表是一个问题。下面是一个JSON示例，其中包含两个表的数据，以及到目前为止我已经将表构建到HTML中的JS，我也包括了这个HTML。任何洞察都将不胜感激。先谢谢你Javascript 尝试从JSON创建多个表；表「；阻碍,javascript,json,Javascript,Json,下午好。我试图完成的是使用发送给我的JSON创建表。如果JSON文件包含表的单个块，则一切正常。但是，多个表是一个问题。下面是一个JSON示例，其中包含两个表的数据，以及到目前为止我已经将表构建到HTML中的JS，我也包括了这个HTML。任何洞察都将不胜感激。先谢谢你 [ { "table": { "tableDetails": [ { "filecreatedate": "8/28/2014 10:43:08 AM
[
{
"table": {
"tableDetails": [
{
"filecreatedate": "8/28/2014 10:43:08 AM",
"Name": "Personal Loans",
"PrintUrl": "print friendly url here",
"EffectiveDate": "3/7/2014",
"disclosure": "disclosure "
}
],
"headers": [
{
"Header1": "Personal Loans",
"Header2": "Loan Amount",
"Header3": "Fee",
"Header4": "APR",
"Header5": "Calculator"
}
],
"columns": [
{
"PersonalLoans": "VISA Platinum Rewards",
"LoanAmount": "$1000 - $25,000",
"Fee": "$0.00",
"APR": "9.15%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "VISA Platinum Low Rate",
"LoanAmount": "$500 - $25,000",
"Fee": "$0.00",
"APR": "8.15%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "Cash-in-a-Flash",
"LoanAmount": "$500 [1]",
"Fee": "$30.00",
"APR": "17.90%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "Lifestyle Loan",
"LoanAmount": "$500 - $5000",
"Fee": "$0.00",
"APR": "10.99%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
}
]
}
},
{
"table": {
"tableDetails": [
{
"filecreatedate": "8/28/2014 10:43:34 AM",
"Name": "Fixed Rate Second Mortgage",
"PrintUrl": "print friendly url here",
"EffectiveDate": "5/1/2014",
"disclosure": "disclosure text"
}
],
"headers": [
{
"Header1": "Loan Amount",
"Header2": "APR LTV <=80%",
"Header3": "APR LTV 80.01-90%",
"Header4": "Note",
"Header5": "Calculator"
}
],
"columns": [
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "5.950%",
"APR LTV 80.01-90%": "6.700%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.200%",
"APR LTV 80.01-90%": "6.950%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "6.450%",
"APR LTV 80.01-90%": "7.200%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "6.200%",
"APR LTV 80.01-90%": "6.950%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.450%",
"APR LTV 80.01-90%": "6.950%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "6.700%",
"APR LTV 80.01-90%": "7.450%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "6.500%",
"APR LTV 80.01-90%": "7.250%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.750%",
"APR LTV 80.01-90%": "7.500%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "7.000%",
"APR LTV 80.01-90%": "7.750%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
}
]
}
}
[
{
“表格”：{
“表格详情”：[
{
“filecreatedate”：“2014年8月28日上午10:43:08”，
“名称”：“个人贷款”，
“打印url”：“此处打印友好url”，
“生效日期”：“2014年3月7日”，
“披露”：“披露”
}
],
“标题”：[
{
“负责人1”：“个人贷款”，
“标题2”：“贷款金额”，
“校长3”：“费用”，
“校长4”：“四月”，
“标题5”：“计算器”
}
],
“栏目”：[
{
“个人贷款”：“VISA白金奖励”，
“LoanAmount”：“1000-25000美元”，
“费用”：“$0.00”，
“APR”：“9.15%”，
“计算器”：”
},
{
“个人贷款”：“VISA白金低利率”，
“LoanAmount”：“500-25000美元”，
“费用”：“$0.00”，
“APR”：“8.15%”，
“计算器”：”
},
{
“个人贷款”：“瞬间兑现”，
“LoanAmount”：“$500[1]”，
“费用”：“$30.00”，
“APR”：“17.90%”，
“计算器”：”
},
{
“个人贷款”：“生活方式贷款”，
“LoanAmount”：“500-5000美元”，
“费用”：“$0.00”，
“APR”：“10.99%”，
“计算器”：”
}
]
}
},
{
“表格”：{
“表格详情”：[
{
“filecreatedate”：“2014年8月28日上午10:43:34”，
“名称”：“固定利率第二抵押”，
“打印url”：“此处打印友好url”，
“生效日期”：“2014年5月1日”，
“披露”：“披露文本”
}
],
“标题”：[
{
“标题1”：“贷款金额”，
“Header2”：“APR LTV在循环中处理JSON数据并动态添加表，而不是依赖于静态元素（插入表
元素，而不是将其放入html中）
（如果您不关心其他表，只需获取第一个索引并通过渲染例程传递它，而不是循环。）
下面是一个使用JSON示例响应动态呈现多个表的fiddle示例：
以及您的代码解决方案：
$.getJSON("path/taken/out/for/SO", function(tables) {
// this is the ajax callback code, goes inside your ajax function
if (tables) {
for (var i = 0, len = tables.length; i < len; i++) {
RenderTable(tables[i]);
}
}
}
function RenderTable(tableDef) {
// create table element template dynamically as a fragment before adding to DOM
var $tbl = $("<table><thead></thead><tbody></tbody></table>");
// wrap the table in a div (for styling and identification)
$tbl.wrap("<div class='rate_table' />");
// render the table name before the table element
var a = tableDef;
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$tbl.before(c.tableDetails[f].Name);
}
});
// render column headers in THEAD
$.each(a, function (e, c) {
for (var f = 0; f < c.headers.length; f++) {
$tbl.children("thead").append('<th class="col_0">' + c.headers[f].Header1 + '</th><th class="col_1">' + c.headers[f].Header2 + '</th><th class="col_2">' + c.headers[f].Header3 + '</th><th class="col_3">' + c.headers[f].Header4 + '</th><th class="col_4">' + c.headers[f].Header5 + "</th>");
}
});
// render the columns' data in TBODY
$.each(a, function (e, c) {
for (var f = 0; f < c.columns.length; f++) {
$tbl.children("tbody").append("<tr><td>" + c.columns[f].PersonalLoans + "</td><td>" + c.columns[f].LoanAmount + "</td><td>" + c.columns[f].Fee + "</td><td>" + c.columns[f].APR + "</td><td>" + c.columns[f].Calculator + "</td></tr>");
}
});
// update rate disclosure
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$("p.rateDisclosure").append(c.tableDetails[f].disclosure);
}
});
// inject the table fragment into the DOM (thus showing the table)
$(document.body).append($tbl);
}
$.getJSON（“路径/取出/取出/for/SO”），函数（表）{
//这是ajax回调代码，位于ajax函数内部
若有（表格）{
对于（变量i=0，len=tables.length；i
您必须动态构建它，这意味着每个'table'
您必须从html创建一个新表，只构建一次。我应该澄清一下。是的，我希望能够选择我将要使用的JSON文件中的哪个表。我已尝试使用[0]或[1]识别我正在使用的表元素。没有这样的运气。语法上我遗漏了一些东西。我为此添加了一个解决方案，该解决方案在表数组中循环，并动态呈现每个表元素，请参见下文。@nothing是必要的，谢谢。工作非常好。获取一些未定义的内容，但我可以解决所有问题。感谢帮助。感谢t他问了一个有趣的问题。如果答案对你有效，请将其标记为“接受”。我以前从未使用过这个网站，我希望这是一个升级版。很好的解决方案。
<table id="tbl">
<thead></thead>
</table>
<p class="rateDisclosure"> </p>
$.getJSON("path/taken/out/for/SO", function(tables) {
// this is the ajax callback code, goes inside your ajax function
if (tables) {
for (var i = 0, len = tables.length; i < len; i++) {
RenderTable(tables[i]);
}
}
}
function RenderTable(tableDef) {
// create table element template dynamically as a fragment before adding to DOM
var $tbl = $("<table><thead></thead><tbody></tbody></table>");
// wrap the table in a div (for styling and identification)
$tbl.wrap("<div class='rate_table' />");
// render the table name before the table element
var a = tableDef;
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$tbl.before(c.tableDetails[f].Name);
}
});
// render column headers in THEAD
$.each(a, function (e, c) {
for (var f = 0; f < c.headers.length; f++) {
$tbl.children("thead").append('<th class="col_0">' + c.headers[f].Header1 + '</th><th class="col_1">' + c.headers[f].Header2 + '</th><th class="col_2">' + c.headers[f].Header3 + '</th><th class="col_3">' + c.headers[f].Header4 + '</th><th class="col_4">' + c.headers[f].Header5 + "</th>");
}
});
// render the columns' data in TBODY
$.each(a, function (e, c) {
for (var f = 0; f < c.columns.length; f++) {
$tbl.children("tbody").append("<tr><td>" + c.columns[f].PersonalLoans + "</td><td>" + c.columns[f].LoanAmount + "</td><td>" + c.columns[f].Fee + "</td><td>" + c.columns[f].APR + "</td><td>" + c.columns[f].Calculator + "</td></tr>");
}
});
// update rate disclosure
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$("p.rateDisclosure").append(c.tableDetails[f].disclosure);
}
});
// inject the table fragment into the DOM (thus showing the table)
$(document.body).append($tbl);
}