Flickr API JSON pull set

Question

I'm building a fairly simple unlimited photopage which gets photos from a Flickr set. I have the following code:

$(window).load(function() {

var apiKey = 'XXX';
var userId = 'XXX';
var photoset_id = 'XXX';

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function(data) {
    $.each(data.photoset.photo, function(i, FlickrPhoto){
        var basePhotoURL = 'http://farm' + data.photos.FlickrPhoto[i].farm + '.static.flickr.com/'
        + data.photos.FlickrPhoto[i].server + '/' + data.photos.FlickrPhoto[i].id + '_' + data.photos.FlickrPhoto[i].secret + ".jpg";            

        var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + FlickrPhoto.id + "/";
        $("<img/>").attr("src", basePhotoURL).appendTo("#photographs").wrap(("<div class='item'></div>"))
    });
});
});

I'm receiving the following error and i can't seem to figure out why. Probably major fail but not seeing it..

TypeError: data.photos is undefined
[Break On This Error]   

...asePhotoURL = 'http://farm' + data.photos.FlickrPhoto[i].farm + '.static.flickr....

Answer 1

Modify your JQuery $.each. You do not need to use i to index each photo. The function is executed for every element in the photo array. flickrPhoto therefore represents each item from data.photoset.photo, so you don't need to prepend it with data.photos.

$.each(data.photoset.photo, function(i, flickrPhoto){
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + ".jpg";            

        var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + flickrPhoto.id + "/";
        $("<img/>").attr("src", basePhotoURL).appendTo("#photographs").wrap(("<div class='item'></div>"))
});