javascript - 我需要将 JSON 数据从文件读取到我的网页上

Question

我有这个 JSON 数组:

    var products = [
{
"productID":"1",
"name":"Stark Navy",
"url": "stark.jpg",
"description": "Waterproof, double velcro straps",
"price": "£45.00"
}, 
{
 "productID":"2",
    "name":"Magica Pink",
    "url":"Images/magica.jpg", 
    "description": "Waterproof, pressure sensed lights",
    "price":"£45.00"
},
{
"productID":"3",
    "name":"William Black",
    "url":"Images/william.jpg", 
    "description": "Leather, double velcro straps",
    "price":"£45.00"
}
];

当单击按钮/图像时，我需要将其读取到我的网页上。我尝试构建 JS 函数来调用此列表中的产品:

$(document).ready(function(){

  $.getJSON('shoppingcart.json', function(data) {
        var output="<div>";

        $.each(data.products, function(i, item) {
            output+="<div id='div" + data.products[i].productID + "'</div>"      +

data.products[i].name + "'>" + 

 "<img src='" + data.products[i].url + "' />" + "<p>" +      data.products[i].description + "</p>" +
 "<p>" + data.products[i].price + "</p>" +


"</div>";
            return ( i !== 3 );

        });

        output+="</div>";
        $("#mainContent").html(output);
  });



$("#geox").click(function(){
    $("#mainContent").fadeIn();
});

我单击的按钮的 ID 为 geox，我希望 JSON 文件中的新数据显示在 ID 为“mainContent”的 div 中。

只是想知道我是否在这段代码中遗漏了某些内容，因为它不会读入网页。

好的，这也是我希望在按下按钮时更改的 HTML 部分:

<button>Geox</button> <button>Converse</button> <button>Startrite</button>     <button>Lea Lelo</button>
<div id="mainContent" class="products">
    <h2>Startrite - Best of the Best</h2>
<section>
 <p>SuperSoft Lily Navy</p>
<img src="images/supersoft%20lily.jpg" id="startrite"/>
<p>Leather, double velcro straps</p>
<p>£39.00</p>
<p>AquaSplash Black</p>
<img src="images/aquasplash.jpg" id="startrite"/>
<p>Leather ankle boot, double velrco straps</p>
<p>£50.00</p>
</section>
<section>
 <p>Cats Whiskers White</p>
<img src="images/cats.jpg" id="startrite"/>
<p>Leather/Patent, single T-bar riptape strap</p>
<p>£38.00</p>
<p>SuperSoft Zac Brown</p>
<img src="images/zac.jpg" id="startrite"/>
<p>Leather, multi-colour riptape single strap</p>
<p>£36.00</p>        
</section>
<section>
<p>Scissors Black</p>
<img src="images/scissors.jpg" id="startrite"/>
<p>Leather school shoes, single riptape strap</p>
<p>£40.00</p>
<p>Hover Black</p>
<img src="images/hover.jpg" id="startrite"/>
<p>Leather school shoes, double velcro straps</p>
<p>£42.00</p>  
</section>        
</div> <!-- End Main Content -->

我只是希望它首先更改前 3 个图像，然后一旦它工作，我就可以更改其余的数据。

Answer 1

您返回的是 JavaScript，而不是 JSON。

删除“var products=”

然后使用

访问它

 $.each(data, function...