Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Martin Coutts
Martin Coutts
18,154 Points

Photos not displaying, just blank links

My photos won't display, I have a lot of empty links where the pictures should be. Here is a copy of my js code:

$(document).ready(function(){ $('button').click(function() { $("button").removeClass("selected"); $(this).addClass("selected"); var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var animal = $(this).text(); var flickrOptions = { tags: animal, format: "json"
}; function displayPhotos(data) { var photoHTML = '<ul>'; $.each(data.items, function(i, photo) { photoHTML += '<li class = "grid-25 tablet-grid-50">'; photoHTML += '<a href = "' + photo.link + '" class ="image">'; photoHTML += '<img src ="' + photo.media.n + '"></a></li>'; }); photoHTML += '</ul>'; $('#photos').html(photoHTML); }
$.getJSON(flickerAPI, flickrOptions, displayPhotos); }); }); //end ready

2 Answers

Sean Urgel
PLUS
Sean Urgel
Courses Plus Student 6,650 Points

The $.getJSON(1, 2, displayPhotos) function is inside function displayPhotos(). You should call it outside the function.

Rhys Kearns
Rhys Kearns
4,976 Points
$(document).ready(function(){ 
  $('button').click(function() { 
    $("button").removeClass("selected"); 
    $(this).addClass("selected"); 
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text(); 
    var flickrOptions = { tags: animal, format: "json"
}; 
function displayPhotos(data) { 
  var photoHTML = '<ul>'; 
  $.each(data.items, function(i, photo) { 
    photoHTML += '<li class = "grid-25 tablet-grid-50">';
    photoHTML += '<a href = "' + photo.link + '" class ="image">'; 
    photoHTML += '<img src ="' + photo.media.n + '"></a></li>'; }); 
    photoHTML += '</ul>'; $('#photos').html(photoHTML); }
 $.getJSON(flickerAPI, flickrOptions, displayPhotos); 
 });
}); //end ready

I made your code a little more readable in the forums incase anyone wants to help