Question

所以我正在寻找一些指导，技巧和知识转移。目前我正在练习获取JSON数据，但我遇到了一些问题。

我遇到的当前问题是我的3变量（品牌，desc和价格）给我这个错误：未捕获的TypeError：无法读取未定义的属性'品牌'

有人可以帮助我吗，更好的编码提示也很好。

var url = 'https://raw.githack.com/gromstone/jsonFiles/master/products.json';

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: url,
    success: function(data){
        console.log(data);

        $.each(data, function(i, products){

            var content = "<div class=\"item grid_4\">"; 

            $.each(products, function(i, mainProd){

                var brand = mainProd.ProductInfo.Brand,
                    desc = mainProd.ProductInfo.p_product_description,
                    price = mainProd.ProductInfo.p_product_price;

                //content += '<img class="scale-with-grid" src="' + src + '"/>';
                content += '<p>' + brand + desc + '</p>';
                content += '<p>' + price + '</p>';
                content += '<a>View More</a>';


            });

            content += "</div><!-- product -->";
            $('.load').append(parent);

        })
    },

    error: function(){
        alert('Data did not load, or no connection')
    }

});

您可以在此处查看工作代码： http://jsfiddle.net/gromstone/j1etxuw0/1/

此外，如果有人可以提供额外的帮助，我想为每个'div.items'做一个悬停效果，其中一些额外的数据显示在一个单独的div上（ex'div.placeHolder'）

谢谢！

Answer 1

问题似乎是你循环遍历在外循环中接收的对象的所有属性

$.each(data, function(i, products){

并且在内部循环中，您希望这些属性是数组，并且每个数组成员都具有ProductInfo属性：

$.each(products, function(i, mainProd){
  var brand = mainProd.ProductInfo.Brand,

但是，JSON文档的顶级属性是：

[ 
  "ProductsList", 
  "RecordsCount", 
  "nValue", 
  "Pages", 
  "Refinements", 
  "Breadcrumbs", 
  "CategoryName", 
  "sortProperty" 
]

所以你的程序首先会循环遍历ProductsList的内部（我想你应该做的是什么），但之后，它将循环遍历RecordsCount的内容，您链接的JSON不包含数组，但数字8。然而，程序中的内部循环期望它是一个数组，并且它们将尝试访问（非数组）成员的属性ProductInfo，然后失败并出现错误。

如果您只是在迭代JSON的ProductsList之后，删除外部循环，并将剩余的（以前内部）循环的each更改为：

$.each(data.ProductsList, function(i, mainProd){

JSON帮助

1 个答案: