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
Pro Student 6,733 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
Pro Student 6,733 Points

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

1 Answer

Joseph Thomas
PRO
Joseph Thomas
Pro 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