如何解决 jQuery 的 .each() 循环中的 "undefined" 错误？

Question

我正在使用Shopatron API，大部分代码都是从他们的示例中采用的。需要注意的是，我正在使用他们的API库进行调用，并且从那个角度连接和工作。除了额外的产品图片无法输出之外，我已经按照需要将所有内容输出。当我尝试循环遍历数组中的图像时，由于发生“未定义”错误，导致无法输出。

供参考，这里是我在Shopatron产品上“拉取”的console.log（data）;的屏幕截图。

我在这里添加了一些红色箭头，以指出我感兴趣的内容。主要是想循环遍历那个图片数组，以便输出其他的图片。下面你可以看到我试图在 .each(); 循环中获取 URL 的位置，但它却给我返回了 undefined。

现在这里是来自我的函数和 .each(); 循环内的 console.log(this.url);，它隔离开了那个图片数组。

如您所见，我正在获取URL，这很好。但是我还得到了undefined，当我试图将其用于附加img标签时，它就会输出为这样。

现在我将向您展示我用来完成所有这些操作的代码。有许多其他函数调用产品选项、价格和垃圾，您可以在第一个屏幕截图中看到。所有这些都有效。我只有图片出了问题，因此我将其隔离到该函数中。

var partNumber = '<?php echo $productID; ?>';
        $(document).ready(function() {
            Shopatron.getProduct({
                partNumber: partNumber
            },{
                success: function(p) {
                    outputProductName(p);
                    outputProductImage(p); // Here's the function up here
                    outputProductPrice(p);
                    outputDescription(p);
                    outputSpecs(p);
                },
                templateFriendly : false                                
            }
        );



        function outputProductImage(data) {

        var target = '#shopatron_product_image';
        var clickFunction = 
        $('#shopatron_product_image').html('<img src="' + data.image + '">');

        // Here's my loop that is giving me undefined...                                                        
        $(data.images).each(function() {

        $('#shopatron_additional_images').append("<li><a href='" + this.url + "' onclick=\"swapImage('#shopatron_product_image', '" + this.url + "'); return false;\"><img src='" + this.url + "'></a></li>");

        });

        return;
        }

这是我获得的控制台输出截图。

感谢您对此事的建议和帮助。

- SpatialAnomaly

---

你确定所有的产品都有关联的图片吗？ - kiranvj

是的，每个产品至少有2张图片。您在第一张截图中看到的“image”是主要图片，然后在下面的“images”中还有1张图片……尽管客户可能会随着时间的推移继续添加更多的图片，这意味着该数组将不仅仅包含那1张额外的图片。但现在，我甚至无法从“images”中获取那一个额外的图片并输出其URL。似乎应该很容易做到。 - SpatialAnomaly

不管价值如何，这是Shopatron在其API文档中使用的示例，我从中进行了适应。http://sellmore.shopatron.com/samples/atc/json.html - 如果您查看源代码，在第204行左右，您可以看到他们正在使用与我相同的each();语句。非常令人困惑... - SpatialAnomaly

在 outputProductImage 函数内，console.log(data) 输出了什么？ - kiranvj

这实际上是你在我上面的原始帖子中看到的第一张截图。 - SpatialAnomaly

我的担忧是，你真的需要在你的问题中发布所有这些代码吗？ - Jhourlad Estrella

Answer 1

我相信这是因为data.images不是DOM元素，你试图从它创建一个jQuery对象。

而不是：

$(data.images).each(function() {

    $('#shopatron_additional_images').append("<li><a href='" + this.url + "' onclick=\"swapImage('#shopatron_product_image', '" + this.url + "'); return false;\"><img src='" + this.url + "'></a></li>");

});

尝试：

$.each(data.images, function(i, image){
   $('#shopatron_additional_images').append("<li><a href='" + image.url + "' onclick=\"swapImage('#shopatron_product_image', '" + image.url + "'); return false;\"><img src='" + image.url + "'></a></li>");
})

这是jQuery针对数组和对象的通用迭代器。

- aquint

---

谢谢您的回复！我仍然在这里得到“未定义”，这是我在控制台中执行console.log(image.url);时的屏幕截图：http://i.imgur.com/KOEDjlj.png - SpatialAnomaly

嗯，如果你只是console.log(image)，会发生什么？ - aquint

这是控制台的屏幕截图，其中包含 console.log(image); - 看到这个，我想知道空的 name: "" 是否与正在发生的事情有关？http://i.imgur.com/h3UvRJF.png - SpatialAnomaly

Answer 2

我真的非常感谢每个人为帮助我解决这个问题所做出的努力。结果证明这是Shopatron方面的错误。当然，它没有生成可见的错误，似乎更像是他们的数据库没有更新。他们的建议是使用标准管理仪表板简单地重新添加产品项目的图片。这解决了问题。虽然不是一个高级的解决方案，但如果其他人遇到同样的问题，也许会有所帮助。

- SpatialAnomaly