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

Photos won't show after inputting all syntax, and previewing. Also I don't have a photo.html file in my workspace.

$(document).ready(function(){ $('button').click(function(){ $('button').removeClass('selected'); $(this).addClass('selected'); var flickrAPI = "http//api.flickr.com/services/feed/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(flickrAPI, flickrOptions, displayPhotos); }); });//End ready

eslam said
eslam said
Courses Plus Student 6,734 Points

Please Wrap your code with 3 backticks (```) on the line before and after.

What you mean? and where should I apply these backticks?

eslam said
eslam said
Courses Plus Student 6,734 Points

Edit your post and put ``` before your code and after the code

1 Answer

Joseph Thomas
PLUS
Joseph Thomas
Courses Plus Student 9,067 Points

Larry, After reviewing your code I found three typos. I will add comments to the typos in your code.

$(document).ready(function(){ 
  $('button').click(function(){ 
    $('button').removeClass('selected'); 
    $(this).addClass('selected');

//----- You forgot the colon after http in the link below & feed should be feeds
    var flickrAPI = "http//api.flickr.com/services/feed/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">'; 

//----- In the image tag below it should be photo.media.m, not photo.media.n
        photoHTML += '<img src="' + photo.media.n + '"></a></li>'; 

      }); 
        photoHTML += '</ul>'; 
      $('#photos').html(photoHTML); 
    } 
    $.getJSON(flickrAPI, flickrOptions, displayPhotos);  
  }); 
});//End ready

After fixing the typos the code ran perfectly fine. Please let me know if this helps. Also, photoHTML is a variable that was created to hold the images that are imported from Flickr in an unordered list format. Regards, Joe Thomas