JQuery & Flickr API, not getting photoset details correctly

Question

Hi,

I amy trying to use the Flickr API to create a photo gallery on my website, I have the API & photoset, and am using the Flickr method 'getPhotos' which returns the photos from a given Set and I am calling this using jQuery.

My javascript all seems to be working fine except whilst the details of the Flickr photoset are being returned, at the point of building my src locations, the data is being lost...

Whilst debugging (using Internet Explorer - F12) the object 'data' contains the expected details, with a parameter of photoset, within that parameter I have the parameter 'photo' and within that I have a collection of objects [0-37] each containing the parameters 'farm, id, secret, server & title' all with the expected values. Yet when I build my HTML var 'theHtml' and fill the gaps with the above values, my HTML value is set to 'undefined'.

So instead of getting the expected: farm4.static.flickr.com/2480/1234567890_a1a1a1a1a1_b.jpg

I get farmundefined.static.flickr.com/undefined/undefined_undefined_b.jpg

Can anyone explain this to me?

Here is my jQuery code:

<script type="text/javascript">
 $(document).ready(function(){
 $.getJSON('http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&amp;api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&amp;photoset_id=00000000000000000&amp;format=json&amp;jsoncallback=?', displayImages);
  function displayImages(data) {
   var theHtml = "";
   $.each(data.photoset, function(i,photo){
    var source = 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg';
    theHtml+= '<li><a href="'+photo.link+'" target="_blank">';
    theHtml+= '<img title="'+photo.title+'" src="'+source+'" alt="'+photo.title+'" />';
    theHtml+= '</a></li>';
   });
   $('#images').html(theHtml);
  };
 });
 </script>

<div id="images"></div>

var source isn't being built corerctly.

Cheers in advance!

Answer 1

Sorted!

$.each(data.photoset, function(i,photo){ 

Should have been

$.each(data.photoset.photo, function(i,photo){