外部json文件中的对象应放在同名的html div中

时间：2016-01-06 04:23:36

标签： javascript jquery html css json

作为jquery和javascript的新手，我正在寻找一种方法将数据从外部json文件插入到HTML代码中。 json中的数据对象的名称与其对应的html div相同。同样应该在html页面的onLoad事件中发生。

＆＃13;
＆＃13; 
           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" }
						]			
                    }					
			}					
		    ]
             }]}
＆＃13; 
         <! 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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您应该考虑使用像把手或小胡子一样的模板解决方案。

我使用您的代码示例创建了一个示例。

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>
相关问题
最新问题