javascript - json objects = respecive html divs -
what exact way(javascript/jquery) point objects created in external json file point , populate corresponding html divs. posting complete code html , json. refer image clear idea of divs , data hold.also should happen @ html onload event.
html code first2
accounts
<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 file
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" }] } }] } 
the html code has data in it. data html file should removed , come json. data mean textual values appearing on page. eg abc - must not case, abc should come json.
so mymainsavings div corresponding mymainsavings object in json, mymainsavingstop div corresponding mymainsavingstop in json, want populate data in corresponding element div through javascript/jquery. in short elements of same name should find in html file.
there isn't exact way. data should structured in way reflects domain objects represents. html should structured in way meets end users requirements. , in middle logic should map model view, best done.
Comments
Post a Comment