試圖從多個「表格」塊創建JSON表格

下午好。我試圖完成的是使用已發送給我的JSON創建表。如果JSON文件包含一個表格的單個塊，則一切正常。儘管多表是一個問題。下面是JSON的一個示例，其中包含兩個表格的數據，以及我迄今爲止將表格構建到HTML中的JS，這些也包括在內。任何洞察力將不勝感激。謝謝你在前進試圖從多個「表格」塊創建JSON表格

[ 
{ 
    "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>" 
      } 
     ] 
    } 
}

]

而且JS：

$("table#tbl").wrap("<div class='rate_table' />"); 
$("table#tbl").append("<tbody></tbody>"); 
var a = {}; 
$.getJSON("path/taken/out/for/SO", function(b) { 
a = b; 
$.each(a, function(e, c) { 
    for (var f = 0; f < c.table.tableDetails.length; f++) { 
     $("table#tbl").before(c.table.tableDetails[f].Name); 
    } 
}); 
$.each(a, function(e, c) { 
    for (var f = 0; f < c.table.headers.length; f++) { 
     $("table#tbl thead").append('<th class="col_0">' + c.table.headers[f].Header1 + '</th><th class="col_1">' + c.table.headers[f].Header2 + '</th><th class="col_2">' + c.table.headers[f].Header3 + '</th><th class="col_3">' + c.table.headers[f].Header4 + '</th><th class="col_4">' + c.table.headers[f].Header5 + "</th>"); 
    } 
}); 
$.each(a, function(e, c) { 
    for (var f = 0; f < c.table.columns.length; f++) { 
     $("table#tbl tbody").append("<tr><td>" + c.table.columns[f].PersonalLoans + "</td><td>" + c.table.columns[f].LoanAmount + "</td><td>" + c.table.columns[f].Fee + "</td><td>" + c.table.columns[f].APR + "</td><td>" + c.table.columns[f].Calculator + "</td></tr>"); 
    } 
}); 
$.each(a, function(e, c) { 
    for (var f = 0; f < c.table.tableDetails.length; f++) { 
     $("p.rateDisclosure").append(c.table.tableDetails[f].disclosure); 
    } 
}); 
});

所有這一切是建立一個表下面的HTML

<table id="tbl"> 
<thead></thead> 
</table> 
<p class="rateDisclosure">&nbsp;</p>

來源

2014-08-29 Tim Wilson

您必須動態構建它，這意味着每個''table''您必須創建新表，從您的HTML，只會構建一次。 – fsi 2014-08-29 18:11:07

我應該澄清。是的，我希望能夠選擇我要使用的JSON文件中的哪個表。我曾嘗試使用[0]或[1]來標識我正在使用的表格元素。沒有這樣的運氣。在句法上我缺少一些東西。 – 2014-08-29 18:27:54

我爲此添加了一個解決方案，循環遍歷表格數組，並動態呈現每一個，請參閱下面的內容.. – nothingisnecessary 2014-08-29 18:29:12

過程中的JSON數據在循環中動態添加表格而不是依賴靜態元素（注入table元素而不是把它放在html中）。

（如果你不關心其他的表，只要抓住了第一個索引，並使之通過你的渲染程序，而不是循環的。）

下面是一個例子小提琴，使用您的JSON動態渲染多個表例如響應：http://jsfiddle.net/6wdksrkp/2/

而對於你的代碼解決方案：

$.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); 
}

來源

2014-08-29 18:10:49 nothingisnecessary

我之前沒有使用過此網站，我希望這會被提高。好的解決方案 – 2014-08-29 18:39:53

試圖從多個「表格」塊創建JSON表格

回答

相關問題