我需要将文件中的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出现在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 -->

我只希望它更改开始的前三个图像，然后一旦它起作用，我就可以更改其余数据。

Answer 1

您将返回JavaScript，而不是JSON。

删除“ var products =”

然后使用

 $.each(data, function...

Answer 2

顺便说一下，您的JavaScript代码也有一些错误。 这是一个更好的版本：

    <script>


    $(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 + "' name='"  +
            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);
    }, function(error){console.log("ERROR");});
    });



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


    </script>

JSON中有一些带有“ images \\”前缀的URL，而另一些则没有。

{
"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"
}]
}

另外，请确保您的脚本代码在HTML代码之后，否则此行将不起作用“ $（“＃geox”）....“

最后一件事，立即更改图像，因为您的“ mainContent”元素始终可见。