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

Loy Yee Ko
Loy Yee Ko
5,814 Points

Hi guys, I have run into this problem, I am not sure what did I do wrong. thanks for the help!

jquery-1.11.0.min.js:4 GET https://api.flickr.com/services/feeds/photo_public.gne?jsoncallback=jQuery111005584688364710975_1547524438603&tags=Dog&format=json&_=1547524438604 net::ERR_ABORTED 404 send @ jquery-1.11.0.min.js:4 ajax @ jquery-1.11.0.min.js:4 n.(anonymous function) @ jquery-1.11.0.min.js:4 getJSON @ jquery-1.11.0.min.js:4 (anonymous) @ flickr.js:21 dispatch @ jquery-1.11.0.min.js:3 r.handle @ jquery-1.11.0.min.js:3

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

1 Answer

Mark Nunes
Mark Nunes
6,930 Points

The FlickrAPI is wrong. You need to change the variable for this:

let flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

Loy Yee Ko
Loy Yee Ko
5,814 Points

oh right! thanks Mark for pointing out!