使用getJSON解析JSON文件

-1

该网站的新功能。我在将json数据解析为JQuery Mobile站点的可折叠列表时遇到了很多困难。我可以将数据解析为一个单独的div，但不能放入单独的div中，这样div就会崩溃。 JSON文件如下：使用getJSON解析JSON文件

 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 is our fastest, smoothest, lightest Cross bike ever, with competition-crushing race geometry, and Trek's exclusive course-smoothing IsoSpeed technology. Mud, sweat, tears, triumph. You'll charge through it all with bigger speed, stronger lines, and more confidence than ever before. Boone is the 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 with input from cyclo-cross legend Sven Nys, the Cross Prestige is the ultimate carbon fibre cross frame. A monocoque front triangle makes it tough and light, while lugged seat stays and chain stays maximise tyre clearance. The lightness will also be appreciated when shouldering the Cross Prestige, as will the unique support between the top tube and seat tube developed at Sven Nys’s request to increase carrying comfort when on the 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 is Ridley's top end cross bike. Featuring the most advanced cross frame in the world, Mudless tube technology, and fully integrated Kevlar cable guides(for smooth shifting and cable life), it's in a 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文件如下：

 <!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> "; 
      for (var i 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>

来源

2014-03-24 SteC

问题不明确 – zerkms

阅读错误控制台。如果没有错误，请报告失败/意外的行为。 – user2864740

尝试改变

document.getElementById("#cycloCrossBikes_List").innerHTML=output;

到

document.getElementById("cycloCrossBikes_List").innerHTML=output;

甚至

$("#cycloCrossBikes_List").html(output);

来源

2014-03-24 23:32:13 andrew

这是因为您只打开和关闭单个div标记。尝试在循环内移动var output=" <div> ";和output+="</div>";。

来源

2014-03-24 23:36:03 robmarston

使用getJSON解析JSON文件

回答

相关问题