javascript - JSON 帮助

Question

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

我当前遇到的问题是我的 3 个变量(品牌、描述和价格)给了我这个错误:未捕获的类型错误:无法读取未定义的属性“品牌”

有人可以帮我解决这个问题吗？关于更好的编码的建议也很好。

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 上(例如“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){