Getting "undefined" from a javascript array in .each loop

Question

I've seen a number of similar questions posted but none of them have been able to get me closer to a solution.

I have data coming in to me like this from an ecommerce API: (keep in mind, I have NO control over how the data is being sent to me so I can't change anything at the "source.")

Object {
url: "http://pathtomyimage.jpg", name: ""}
name: ""url:  "http://pathtomyimage.jpg"

__proto__: Object__defineGetter__: __defineGetter__() { [native code] }__defineSetter__: __defineSetter__() { [native code] }__lookupGetter__: __lookupGetter__() { [native code] }__lookupSetter__: __lookupSetter__() { [native code] }constructor: Object() { [native code] }hasOwnProperty: hasOwnProperty() { [native code] }isPrototypeOf: isPrototypeOf() { [native code] }propertyIsEnumerable: propertyIsEnumerable() { [native code] }toLocaleString: toLocaleString() { [native code] }toString: toString() { [native code] }valueOf: valueOf() { [native code] }get __proto__: __proto__() { [native code] }set __proto__: __proto__() { [native code] }

These are essentially images that I would like to loop through on a .each statement and get the url. I frankly don't know what all that Proto stuff is? But I'm not really interested in outputting any of it.

This is what I'm doing:

$(data.images).each(function(index, value) {

console.log(this.url); // This is what is outputting the array you see above 

});

I'm getting the URL but I'm also getting "undefined" which is breaking the image if I try to do this in the .each loop...

$(data.images).each(function(index, value) {
$('#myContainer').append("<img src='" + this.url + "'>");
});

Thanks in advance for suggestions and help.

EDIT - I was asked to post the entire string. If I console.log(data) this is what I get. It's a huge array of... well, stuff. I did not expand open every object but I believe this will give you an idea of the structure of the entire object. Before I was trying to pair it down to just where I was having trouble but if you believe the entire string will help, here it is.

Object
    availability: Objectcode: "M"__proto__: Object__defineGetter__: __defineGetter__() { [native code] }__defineSetter__: __defineSetter__() { [native code] }__lookupGetter__: __lookupGetter__() { [native code] }__lookupSetter__: __lookupSetter__() { [native code] }constructor: Object() { [native code] }hasOwnProperty: hasOwnProperty() { [native code] }isPrototypeOf: isPrototypeOf() { [native code] }propertyIsEnumerable: propertyIsEnumerable() { [native code] }toLocaleString: toLocaleString() { [native code] }toString: toString() { [native code] }valueOf: valueOf() { [native code] }get __proto__: __proto__() { [native code] }set __proto__: __proto__() { [native code] }

    averageDealerMargin: "0.50"
    currency: "USD"
    customFields: Array[0]
    image: "http://pathtoaimage.jpg"
    // Here's the trouble maker...
    images: Array[2]0: Objectname: ""url: "http://pathtoanotherimage.jpg"__proto__: Object1: Array[0]length: 2__proto__: Array[0]
    locale: "en-US"
    name: "ProductName"
    partNumber: "700"
    price: "19.99"
    priceDisplay: "$19.99"
    shippingMethod: "3"
    weight: Object
        units: "lb"
         value: "1.8"
__proto__: Object__proto__: Object

Apologies if it wasn't totally clear before, I really do appreciate the assistance here. I've been banging my head on this one for about 2 days on and off.

One more edit... One answer on here did click into something I didn't consider with the absence of a return on a function. To expand further on how I'm pulling on this data is using functions because I'm checking first that the product I'm referencing is legit. This is Shopatron API FWIW, the documentation has been, lacking, would be a nice way to put it... so anyway you'll see reference to that at the top of script like so:

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

Now my function down below follows:

function outputProductAdditionalImages(data) {
    $('#myContainer').append("<img src='" + this.url + "'>");
});

`I'm getting the URL but I'm also getting "undefined"` "also" how? — Jan, Jul 17 '15 at 00:34
looks like `this.url` isn't defined in every `data.images` - so check `if (data.images.hasOwnProperty('url'))` first — Michael Tallino, Jul 17 '15 at 00:36
Can you edit your question to include the exact text string returned by this API? I have trouble believing that what's in the question is the actual text that the API sends down. — Michael Geary, Jul 17 '15 at 01:05
I added the console.log(data) so you can see the entire object. Thanks — SpatialAnomaly, Jul 17 '15 at 17:30

score 2 · Answer 1 · edited Feb 04 '16 at 12:58

2

Try using $.each this way:

$.each(data.images, function(i, obj) {
    if (obj.url) {
        $('#myContainer').append("<img src='" + obj.url + "'>");
    }
});

See if that does the trick.

edited Feb 04 '16 at 12:58

Arslan Ali

17,418
8
58
76

answered Jul 17 '15 at 00:37

kanzelm3

535
3
12

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

I think you are facing following situation:

In short, a function in javascript that does not have a return value, returns undefined. See this image as example:

enter image description here

Also, you may refer to this other answer

edited May 23 '17 at 10:28

Community

1
1

answered Jul 17 '15 at 00:44

leo.fcx

6,137
2
21
37

What function would he be calling that is returning `undefined`? – Frank Fajardo Jul 17 '15 at 07:16

Getting "undefined" from a javascript array in .each loop

2 Answers2