How to enable "undefined" in this jQuery.each () loop?

Question

I work with Shopatron APIs, and most of them have been taken from their examples. It should be noted that I use their API library to make a call, and it connects and works from this point of view. I get everything to output as I need it, with the exception of additional product images that will not be output due to an "undefined" error when I try to loop through the .each()images in an array.

For reference, here is a screenshot of console.log(data);I “pull” for a product in Shopatron.

I added a few red arrows to indicate what interests me here. Basically, I want to skip this array of images so that I can output additional images. Below you can see where I am trying to get the url in my loop .each();, and instead it gives me undefined.

Now here is console.log(this.url);inside my function and loop .each();, so it stands out only for this array of images.

As you can see, I get the url, that's good. But I also get undefinedwhich is then output as such when I try to use it to add an img tag.

Now I will show you the code that I use to do all this. There are many other functions that cause product parameters, as well as price and unwanted effects, you can see in this first screenshot. It all works. I only have problems with images, so I isolate them from this function.

var partNumber = '<?php echo $productID; ?>';
        $(document).ready(function() {
            Shopatron.getProduct({
                partNumber: partNumber
            },{
                success: function(p) {
                    outputProductName(p);
                    outputProductImage(p); // Here 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 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 screenshot of the console of what I get for output for kicks.

Thanks 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:

$(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 a generic jQuery iterator for arrays and objects.

Answer 2

, . Shopatron. , , , . , , admin, . . , , , - , .