Question

网站新手。我在将json数据解析为JQuery Mobile站点的可折叠列表时遇到了很大困难。我可以将数据解析为单个div而不是单独的div，这样div就会崩溃。 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>

Answer 1

尝试更改

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

到

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

甚至

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

Answer 2

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

使用getJSON解析JSON文件

2 个答案: