将外部JSON文件中创建的对象指向并填充到相应的html div的确切方式（javascript / jquery）是什么？我发布了html和JSON的完整代码。另请参阅图像以清楚地了解div的位置以及它们保存的数据。这也应该发生在HTML onLoad事件中。
HTML代码
first2
我的账户
<div class="MyMainSavings">
<div class="MyMainSavingsTop">
<table class="MyMainSavingsTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class="InterestRate">
</div>
<div class="regular">Regular</div>
</div>
<div class="MyMainSavingsBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyEverydayExpenses">
<div class="MyEverydayExpensesTop">
<table class="MyEverydayExpensesTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
<p></p>
</div>
<div class="regular">Regular</div>
</div>
<div class="MyEverydayExpensesBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyDeposit">
<div class="MyDepositTop">
<table class="MyDepositTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="MyDepositBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="FavDeposit">
<div class="FavDepositTop">
<table class="FavDepositTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="FavDepositBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></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></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="HomeLoanBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="Ruby">
<div class="RubyTop">
<table class="RubyTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
</div>
<div class="regular">Regular</div>
</div>
<div class="RubyBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyOverdraft">
<div class="MyOverdraftTop">
<table class="MyOverdraftTop">
<tr>
<td>MyOverdraft</td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
</div>
<div class="regular"></div>
</div>
<div class="MyOverdraftBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
JSON文件
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"
}]
}
}]
}
html代码中包含数据。基本上来自html文件的数据应该被删除，并且只来自json。根据数据，我的意思是出现在页面上的文本值。例如abc - 不一定是这种情况，abc应该来自json。
因此MyMainSavings div对应于json中的MyMainSavings对象，然后MyMainSavingsTop div对应于json中的MyMainSavingsTop，所以我想通过javascript / jquery填充其对应元素div中的数据。简而言之，同名的元素应该在html文件中找到它们。
答案 0 :(得分：0)
没有一个确切的方法。您的数据应以适当反映其所代表的域对象的方式构建。您的html应该以满足最终用户要求的方式构建。在中间，逻辑应该将模型映射到视图，但最好完成。
