外部json文件中的對象應放置在同名的html div中
[英]Objects in external json file should be placed in html divs of same name
問題描述
作為jquery和javascript的新手，我正在尋找一種將數據從外部json文件插入html代碼的方法。 json中的數據對象的名稱與其對應的html div相同。 html頁面的onLoad事件也應該發生相同的情況。
var mainObject = {"Main":[{ "I_Have": [ { "MyMainSavings": { "MyMainSavingsTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 5,600.00", "Rate":"" }, "MyMainSavingsBottom": [ {"Available": "Available","Value": "$4329"}, {"Clear": "Clear","Value": "$3456"}, {"Hold": "Hold","Value": "$5000"} ] } }, { "MyEverydayExpenses": { "MyEverydayExpensesTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 600.00", "Rate":"" }, "MyEverydayExpensesBottom": [ {"Available": "Available","Value": "$4329"}, {"Clear": "Clear","Value": "$3456"}, {"Hold": "Hold","Value": "$7300"} ] } }, { "FavDeposit": { "FavDepositTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 5,000.00", "Rate": "@4.5%" }, "FavDepositBottom": [ {"MaturityValue": "Maturity Value","Value": "$4009"}, {"Term": "Term","Value": "$1156"}, {"MaturesOn": "Matures On","Value": "$5000"} ] } }, { "MyDeposit": { "MyDepositTop": { "AccountName": "MyMainSavings", "AccountNumber": "x726", "Balance": "USD 8,600.00", "Rate": "@4.5%" }, "MyDepositBottom": [ {"MaturityValue": "Maturity Value","Value": "$4329"}, {"Term": "Term","Value": "$3456"}, {"MaturesOn": "Matures On","Value": "$5000"} ] } } ] }, { "I_Owe" :[ {"HomeLoans": { "HomeLoansTop": { "AccountName":"MyMainSavings", "AccountNumber":"x726", "Balance":"USD 5,600.00", "Rate":"@4.5% floating" }, "HomeLoansBottom": [ {"Installment":"Installment","Value":"$4329" }, {"Disbursed":"Disbursed","Value":"$3456" }, {"CurrentDues":"Current Dues","Value":"$5000" } ] } }, {"Ruby": { "RubyTop": { "AccountName":"MyMainSavings", "AccountNumber":"x726", "Balance":"USD 600.00", "Rate":"" }, "RubyBottom": [ {"$6500 Dues":"$6500 Dues","Value":"$4329" }, {"Minimum Due":"Minimum Due","Value":"$3456" }, {"Unbilled":"Unbilled","Value":"$7300" } ] } }, {"MyOverdraft": { "MyOverdraftTop": { "AccountName":"MyMainSavings", "AccountNumber":"x726", "Balance":"USD 5,000.00", "Rate":"" }, "MyOverdraftBottom": [ {"Available":"Available","Value":"$4009" }, {"Unclear":"Unclear","Value":"$1156" }, {"Sanc_Limit":"Sanc. Limit","Value":"$5000" } ] } } ] }]}
<! DOCTYPE html> <html> <meta charset="UTF-8"> <title>first2</title> <head> <link rel="stylesheet" type="text/css" href="jsoncss.css"> </head> <body> <div class="wrapper"> <div class="MyAccountsLabel"> <div class="MyAccountsLeft">My Accounts</div> <div class="MyAccountsRight"></div> </div> <div class="LeftSection"> <div class="LeftSectionTopLeft">I Have (in 4 Accounts)</div> <div class="LeftSectionTopRight">+USD 13,700.00</div> <div class="MyMainSavings"> <div class="MyMainSavingsTop"> <table class="MyMainSavingsTop"> <tr> <td>MyMainSavings</td> </tr> <tr> <td>x725</td> </tr> <td>USD 7,600.00</td> </table> <div class=".InterestRate"><p></p></div> <div class="regular">Regular</div> </div> <div class="MyMainSavingsBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> <div class="MyEverydayExpenses"> <div class="MyEverydayExpensesTop"> <table class="MyEverydayExpensesTop"> <tr> <td>MyEverydayExpenses</td> </tr> <tr> <td>x725</td> </tr> <td>USD 7,600.00</td> </table> <div class=".InterestRate"><p></p></div> <div class="regular">Regular</div> </div> <div class="MyEverydayExpensesBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> <div class="MyDeposit"> <div class="MyDepositTop"> <table class="MyDepositTop"> <tr> <td>MyDeposit</td> </tr> <tr> <td>x725</td> </tr> <td>USD 7,600.00</td> </table> <div class=".InterestRate">@8% Floating Rate</div> <div class="regular">Regular</div> </div> <div class="MyDepositBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> <div class="FavDeposit"> <div class="FavDepositTop"> <table class="FavDepositTop"> <tr> <td>FavDeposit</td> </tr> <tr> <td>x725</td> </tr> <td>USD 7,600.00</td> </table> <div class=".InterestRate">@8% Floating Rate</div> <div class="regular">Regular</div> </div> <div class="FavDepositBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> </div> <div class="RightSection"> <div class="RightSectionTopLeft">I Owe (from 3 Accounts)</div> <div class="RightSectionTopRight">-USD 33,4500.00</div> <div class="HomeLoan"> <div class="HomeLoanTop"> <table class="HomeLoanTop"> <tr> <td>HomeLoan</td> </tr> <tr> <td>x725</td> </tr> <td>USD$7,600.00</td> </table> <div class=".InterestRate">@8% Floating Rate</div> <div class="regular">Regular</div> </div> <div class="HomeLoanBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> <div class="Ruby"> <div class="RubyTop"> <table class="RubyTop"> <tr> <td>Ruby</td> </tr> <tr> <td>x725</td> </tr> <td>USD$7,600.00</td> </table> <div class=".InterestRate"><p></p></div> <div class="regular">Regular</div> </div> <div class="RubyBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> <div class="MyOverdraft"> <div class="MyOverdraftTop"> <table class="MyOverdraftTop"> <tr> <td>MyOverdraft</td> </tr> <tr> <td>x725</td> </tr> <td>USD$7,600.00</td> </table> <div class=".InterestRate"><p></p></div> <div class="regular">Regular</div> </div> <div class="MyOverdraftBottom"> <table class="tablebottom"> <tr> <td>Available</td> <td class="right">$7500</td> </tr> <tr> <td>Unclear</td> <td class="right">$750</td> </tr> <td>Hold</td> <td class="right">USD$7,600.00</td> </table> </div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2016-01-06 05:45:51
您應該看一下使用諸如把手或小胡子js這樣的模板解決方案。
我使用您的代碼示例創建了一個示例。
http://codepen.io/partypete25/pen/zrZdNp
<table class="MyMainSavingsTop">
<tr>
<td>Account Name</td>
<td>Account Number</td>
<td>Balance</td>
<td>Rate</td>
</tr>
<tr>
{{#MyMainSavings}}
<td>{{MyMainSavingsTop.AccountName}}</td>
<td>{{MyMainSavingsTop.AccountNumber}}</td>
<td>{{MyMainSavingsTop.Balance}}</td>
<td>{{MyMainSavingsTop.Rate}}</td>
{{/MyMainSavings}}
</tr>
</table>
js代碼不在外部文件中工作，但在放在同一個html頁面時工作文件
[英]js code is not working in an external file, but works file when placed in the same html page
Jquery 和 Bootstrap 應該放在 HTML 文件的哪個位置？
[英]Where in the HTML file should Jquery and Bootstrap be placed?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.