Hello there. My goal is to generate tables from the JSON data I've received. While creating a table works fine with a single block of JSON, I face challenges when dealing with multiple blocks for multiple tables. Below you'll find an example of JSON containing data for two tables, along with the JavaScript code I have so far to insert the table into the HTML document. Any advice or suggestions on this matter would be greatly appreciated. Thank you in advance.
[
{
"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>"
},
...
]
}
},
{
"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%",
...
},
...
]
}
}
]
And here's the associated JS code:
$("table#tbl").wrap("<div class='rate_table' />");
$("table#tbl").append("<tbody></tbody>");
var data = {};
$.getJSON("path/taken/out/for/SO", function(response) {
data = response;
$.each(data, function(index, item) {
for (var i = 0; i < item.table.tableDetails.length; i++) {
$("table#tbl").before(item.table.tableDetails[i].Name);
}
});
...
});
The final output should look like this:
<table id="tbl">
<thead></thead>
</table>
<p class="rateDisclosure"> </p>