jquery - Parsing JSON file using getJSON -
new site. having major difficulties parsing json data collapsible list jquery mobile site. can data parse single div not separate div's div's collapse. json file follows:
json {"cyclocrossbikes":[ { "name":"trek boone 9 disc", "imgpath":"<img src=\"http://www.weraceshimano.com/imagegen.ashx?width=465&constrain=true&image=/media/161868/bike_picture_3800_pix_breed.jpg\">", "description":"boone our fastest, smoothest, lightest cross bike ever, competition-crushing race geometry, , trek's exclusive course-smoothing isospeed technology. mud, sweat, tears, triumph. you'll charge through bigger speed, stronger lines, , more confidence ever before. boone ultimate cyclocross superbike.", "link":"http://www.trekbikes.com/ie/en/bikes/road/cyclocross/boone/" }, { "name":"colnago prestige", "imgpath":"<img src=\"http://ep.yimg.com/ay/glorycycles/colnago-world-cup-disc-cross-bike-2014-1.gif\">", "description":"developed input cyclo-cross legend sven nys, cross prestige ultimate carbon fibre cross frame. monocoque front triangle makes tough , light, while lugged seat stays , chain stays maximise tyre clearance. lightness appreciated when shouldering cross prestige, unique support between top tube , seat tube developed @ sven nys’s request increase carrying comfort when on shoulder.", "link":"http://colnago.com/prestige-2/?lang=en" }, { "name":"ridley x-night 10", "imgpath":"<img src=\"http://content.ridley-bikes.com/bikes/x-night-10-disc-lv-bel_1380019666993029.jpg\">", "description":"the ridley x-night 1201d ridley's top end cross bike. featuring advanced cross frame in world, mudless tube technology, , integrated kevlar cable guides(for smooth shifting , cable life), it's in class of it's own. ", "link":"http://www.ridley-bikes.com/be/en/bikes/4/144/44/cyclocross/x-night-10-disc-lv-bel" } ]} html file follows:
<!doctype html> <html> <head> <meta charset="utf-8" /> <style> </style> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.css" /> <script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script> <script language="javascript" type="text/javascript"> $.getjson('json_list.json', function(data) { var output=" <div> "; (var in data.cyclocrossbikes) { output+="<h3>"+data.cyclocrossbikes[i].name+"</h3>"; output+= data.cyclocrossbikes[i].imgpath; output+="<p>"+data.cyclocrossbikes[i].description+"<p/>"; output+="<a href="+data.cyclocrossbikes[i].link+">learn more</a>"; } output+="</div>"; document.getelementbyid("#cyclocrossbikes_list").innerhtml=output; }); </script> <title> </title> </head> <body> <div data-role="main" class="ui-content"> <div data-role="collapsibleset" > <div data-role="collapsible" id="cyclocrossbikes_list"> </div> </div> </div> </body> </html>
try changing
document.getelementbyid("#cyclocrossbikes_list").innerhtml=output; to
document.getelementbyid("cyclocrossbikes_list").innerhtml=output; or even
$("#cyclocrossbikes_list").html(output);
Comments
Post a Comment