将JSON对象指向相应的HTML div
将外部JSON文件中创建的对象指向并填充到相应的html div的确切方式（javascript / jquery）是什么？我发布了html和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"
}]
}
}]
}
参考图像
html代码中包含数据。基本上来自html文件的数据应该被删除，并且只来自json。根据数据，我的意思是出现在页面上的文本值。例如abc - 不一定是这种情况，abc应该来自json。
因此MyMainSavings div对应于json中的MyMainSavings对象，然后MyMainSavingsTop div对应于json中的MyMainSavingsTop，所以我想通过javascript / jquery填充其对应元素div中的数据。简而言之，同名的元素应该在html文件中找到它们。
2 个答案:
答案 0 :(得分：0)
好的，让我给你一个简短的想法，以便你可以开始，然后进一步询问：
-
在脚本中创建一个函数，并使用AJAX调用您的数据文件，例如
function get_data（）{ var eurl =''你的网址'; $就（{ 类型：“GET”， 网址：EURL， 数据类型： “JSON”， 异步：是的， 成功：功能（数据）{ if（data.text）{ var JSONa = JSON.parse（data.text）; } 其他{ var JSONa = data; }
- 尝试使用循环打印你的json并使用它，因为你在html中有相同的名字，所以你可以尝试使用数据键作为选择器，并在其中附加相应的键值。
2.您现在拥有数据，因此您可以遍历它，例如
var emi = JSONa.response[0].data.options;
$.each(emi, function(key,value){});
不要忘记最后调用该函数。
get_data();
希望这可以帮助您从现在开始。
谢谢！
答案 1 :(得分：0)
将此Json解析为javascript变量，如下所示：
var json = jQuery.parseJSON(data);
并且，使用JQuery.each函数，您可以循环如下所示
jQuery.each(json.Main, function(idx, obj) {
jQuery.each(obj.I_Have, function(idx1, obj1) {
jQuery.each(obj1.MyMainSavings, function(idx2, obj2) {
jQuery.each(obj2.MyMainSavingsTop, function(idx3, obj3) { $("table .MyMainSavingsTop tr").val(obj3.AccountName);
});
});
});
});
您也可以对其他元素重复相同的内容。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？