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

Roudy Antenor
Roudy Antenor
4,124 Points

photos show up BUT all disorganized?

Hello all here is my code - i opted to not use the variables and code the $.getJSON with my demands however -- i have the same code as video by photos show up with none of the styling -- any thoughts??

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

     let animal = $(this).text(); //get text from html elem.
    $.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
              {
                tags: animal,
                format: "json"
              },   
              function(data){
                let 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.m + '"></a></li>';
                }); //end each
                  photoHTML += '</ul>';
                  $('#photos').html(photoHTML); 

                } //end callback function
    ); //end .getJSON
  });// end click event handler   
}); //end ready

1 Answer

Charles Wanjohi
Charles Wanjohi
9,235 Points

The error is in this statement

 photoHTML += '<a href="' + photo.link + '" class="image">'; 
//  ensure the class=image " has the "image" value enclosed in quotes

Hope this helps you out

Roudy Antenor
Roudy Antenor
4,124 Points

Ahhhhh .... It works! Many Thanks!