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

Konstantin Ruzhev
Konstantin Ruzhev
6,335 Points

Nothing happens. Any ideas ?

This is Code

`$(document).ready (function () {

$('button').click(function () {

$("button").removeClass("selected");
$(this).addClass("selected");

const animal = $(this).text();
const url = "http:/api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + animal; 

$.ajax ({ url: url, method:"GET", dataType:"jsonp", jsonpCallback: "jsonFlickrFeed", success: function (data){ console.log(data);

 let photoHTML = '<ul>';

  $.each(data.items, function (i,photos){


    photoHTML += '<li class="grid-12 tablet-grid-50" >';
    photoHTML += '<a href="' + photos.link + '" class="image">';
    photoHTML += '<img src="' + photos.media.m + '"> </a></li>';

  });

  photoHTML += '</ul>';
  $('#photos').html(photoHTML);

} // ends callback

}); // End of $.ajax

});

}); `

1 Answer

Steven Parker
Steven Parker
177,667 Points

The code is hard to read (use Markdown formatting for future postings), but one thing stood out for me:

    photoHTML += '<img src="' + photos.media.m + '" </a></li>';   // img tag is not complete
    photoHTML += '<img src="' + photos.media.m + '>" </a></li>';  // fixed with added >