如何在这个jQuery .each（）循环中解析“undefined”？

Question

I'm working with the Shopatron API and most of the following code was adopted from their example(s). It should be noted I'm using their API Library to make the call and it's connecting and working from that perspective. I'm getting everything to output as I need it with the exception of additional product images which won't output because of an "undefined" error happening when I attempt to loop through .each() of the images in the array.

For reference, here is a screenshot of the console.log(data); I'm "pulling" on for a product in Shopatron.

I added some red arrows to point out what I'm interested in here. Mainly I want to loop through that images array so I can output the additional images. Below you can see where I'm attempting to get the URL in my .each(); loop and it's giving me undefined instead.

Now here is a console.log(this.url); from inside my function and .each(); loop, so it's isolating out to just that images array.

As you can see, I'm getting the URL, that's good. But I'm also getting undefined which then outputs as such when I'm trying to use it to append an img tag.

Now I'll show you the code I'm using to do all of this. There's a lot of other functions that are calling on product options and price and junk you can see in that first screen shot. All of that is working. I'm only have trouble with the images so I'm isolating it down to that function.

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

Here's a console screenshot of what I'm getting for output for kicks.

Thank you for your suggestions and help with this.

Answer 1

I believe this is because data.images is not a dom element and you are trying to create a jQuery object from it.

Instead of:

$(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>");

});

try:

$.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>");
})

This is jQuery's generic iterator for arrays and objects.

Answer 2

I really want to thank everyone who made an effort to help me resolve this. It turned out to be an error on Shopatron's side of things. It was of course not generating a visible error, seemed more like their database was not updating. Their suggestion was to simply re-add the pictures to the product items using the standard admin dashboard, nothing fancy. It fixed the issue. Not exactly an advanced solution but maybe if someone else runs into this, it will help.