DropDown crashes with JSON content

Question

Using jQuery. How can I call JSON when I hover over a link, we can say that I have the main DIV:

<div class="mainnav"> <UL> <li id="mainnav1">Movie</li> <li id="mainnav2">Drama</li> <li id="mainnav3">trailer</li> </UL> </div> 

on the mouse over Movie wanted to display subnav

  <div class="subnav"> <Ul> <h3><a href="/comady.html">Comady</a></h3> <li><a href="/movies/KungFuDunk">KungFu Dunk</a></li> <li><a href="/movies/IntimateAffairs">Intimate Affairs</a></li> <li><a href="/movies//movies/HighHopes">High Hopes</a></li> </UL> <UL> <h3><a href="/classics.html">Classics</a></h3> <li><a href="/movies/TheWomanWhoCameBack">The Woman Who Came Back</a></li> <li><a href="/movies/TheNorthStar">The North Star</a></li> </UL> 

I can do this with static content, but what I wanted to do is that there in the DIV the subnav will be dynamic, so I wrote JSON, something like this

  [ { "catogoryName" : "Movie", "productGroupInformationList" : [ { "groupName" : "comady", "link" : "/comady.html", "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk", "productTitle" : "Kung Fu Dunk" }, { "productLink" : "/movies/IntimateAffairs", "productTitle" : "Intimate Affairs" }, { "productLink" : "/movies/HighHopes", "productTitle" : "High Hopes" } ] }, { "groupName" : "Classics", "link" : "/classics.html", "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack", "productTitle" : "The Woman Who Came Back" }, { "productLink" : "/movies/TheNorthStar", "productTitle" : "The North Star" } ] } ] } ] 

Answer 1

you can try this jQuery code,

  var jsn = [ { "catogoryName" : "Movie", "productGroupInformationList" : [ { "groupName" : "comady", "link" : "/comady.html", "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk", "productTitle" : "Kung Fu Dunk" }, { "productLink" : "/movies/IntimateAffairs", "productTitle" : "Intimate Affairs" }, { "productLink" : "/movies/HighHopes", "productTitle" : "High Hopes" } ] }, { "groupName" : "Classics", "link" : "/classics.html", "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack", "productTitle" : "The Woman Who Came Back" }, { "productLink" : "/movies/TheNorthStar", "productTitle" : "The North Star" } ] } ] } ]; $("#mainnav1").hover(function(data) { for(var i in jsn) { //alert( jsn[i].catogoryName); document.write(jsn[i].catogoryName + '<br>'); var l2cnt = jsn[i].productGroupInformationList.length; for(var l2=0; l2<l2cnt; l2++ ) { document.write(jsn[i].productGroupInformationList[l2].groupName + '<br>'); document.write(jsn[i].productGroupInformationList[l2].link + '<br>'); var l3cnt =jsn[i].productGroupInformationList[l2].productsInformationList.length; for(var l3=0; l3<l3cnt; l3++) { document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productLink + '<br>'); document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productTitle + '<br>'); } } } }); 

Answer 2

Check out jQuery Templates or similar functionality offered by mustache.js and underscore.js . Each of them will allow you to pass a JSON object to the template to allow JSON to be rendered in the template.