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();
});

我点击的按钮有一个geox ID，我希望JSON文件中的新数据显示在ID为＆＃34; mainContent＆＃34;的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...

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中有一些带有＆＃34; images \＆＃34;的网址。前缀和其他没有它的人。

{
"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代码之后，否则此行不会工作＆＃34; $（＆＃34;＃geox＆＃34;）....＆＃34;

最后一件事，图片会立即更改，因为您的＆＃34; mainContent＆＃34;元素始终可见。

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

2 个答案: