【发布时间】：2016-04-09 02:52:39
【问题描述】：
如何在 html 页面的 onLoad 上从 json 对象/数组（在外部 json 文件中）获取数据到它们各自的嵌套 div。
<! 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>
<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></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"
}]
}
}]
}
所以问题是 json 中的对象 MyMainSavings 应该指向具有类名 MyMainSavings 的 div，等等。
【问题讨论】：
-
html 代码中有数据。基本上来自 html 文件的数据应该被删除并且只来自 json。我所说的数据是指出现在页面上的文本值。 egabc- 一定不能这样，abc应该来自json
-
@Rory McCrossan jquery/javascript 代码是什么？
-
我不明白你的意思？
-
您的 JSON 对象无效。您可以验证并重新发布吗
-
我的意思是MyMainSavings div对应json中的MyMainSavings对象，那么MyMainSavingsTop div对应json中的MyMainSavingsTop，所以我想通过javascript/jquery填充其对应元素div中的数据.总之，同名元素应该在 html 文件中找到自己。
标签： javascript jquery html css json