Undefined is not an object - When attempting to access json object

Question

I'm currently attempting to use the Flickr API and javascript to generate a page based on a search query, in this case, dogs. When the line

var hyperLink = "https://www.flickr.com/photos/" + photo.owner + "/" + photo.id + ".jpg";

Runs it states undefined is not an object in regards to photo.owner. I am able to print out photo.owner using console.log(photo.owner) but cannot access it to merely print out the information in the url.

Full code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Flickr Experiment</title>
</head>
<body id ="1">


<script>
    function jsonFlickrApi(rsp) {
        var str = "";
        str +="<h1>Doggo piccies from Flickr</h1>"; 
        str +="<h3>Total piccies: " + rsp.photos.photo.length;
        var i;
        for (i = 0; i <= rsp.photos.photo.length; i++) { 
        var photo = rsp.photos.photo[i];
        var imageTitle = photo.title;
        var hyperLink = "https://www.flickr.com/photos/" + photo.owner + "/" + photo.id + ".jpg";
        var imgLink = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_t.jpg";
        str +="<a href=\"" + hyperLink + "\"><img alt=\"" + imageTitle + "\" src=\"" + imgLink + "\"/></a>"
        }

        document.writeln(str);
    }
</script>


<script src="https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXf&tags=golden-retriever&per_page=100&format=json">
</script>
</body>

</html>

Debug your code. Step through it in a debugger, examining the value of variables. SO is not a human-powered remote debugging service. — user663031
– user663031, Commented Aug 16, 2017 at 5:52
Thanks @FelixKling I'm really glad it was as simple as the <= causing it, I've been pulling hair for a couple of days now. I assumed that it was failing to retrieve the object on the first pass and was very confused. I had tried many object/accessing data solutions but had not considered it was caused by my loop. I'm pretty used to debugging Java but am still learning Chrome/Safari's debugging tools so I'll keep this in mind for next time! — Rick
– Rick, Commented Aug 16, 2017 at 5:57
@torazaburo This is the first time I've ever posted to SO, normally I can find my answers in past responses / googling but this one stumped me. Thank you for your warm welcome to the community. — Rick
– Rick, Commented Aug 16, 2017 at 6:02

Felix Kling · Accepted Answer · 2017-08-16 05:47:28Z

1

Arrays are zero based. That means if an array's length is 3, then the highest index is 2. The loop condition must therefore be

i < rsp.photos.photo.length
//^^ strictly smaller, not smaller or equal

If not, you will be accessing an index (namely the length of the array) which doesn't exist, which will result in undefined, the error you are getting.

Simple example:

var arr = [1,2,3];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[arr.length]);

Collectives™ on Stack Overflow

Undefined is not an object - When attempting to access json object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related