javascript - Objects in external json file should be placed in html divs of same name -
being new jquery , javascript, looking way insert data external json file html code. data objects in json named same corresponding html divs. same should happen @ onload event of html page.
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" } ] } } ] }]} <! 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>
you should @ using templating solution handlebars or moustache js.
i've created example using sample of code.
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>
Comments
Post a Comment