如何将json对象/ arays（在外部json文件中）中的数据提取到html页面onLoad上的html中各自的嵌套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，以此类推其他孩子。
答案 0 :(得分：0)
要访问json，只需执行
mainObject.Main[0].I_Have[0].MyMainSavings.MyMainSavingsTop
如果您想列出内容并获取可以使用的名称
for (var i in mainObject.Main[0])
console.log(i);
> I_Have
for (var i in mainObject.Main[0].I_Have[0])
console.log(i);
> MyMainSavings