Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

romankozak2
romankozak2
5,782 Points
Posted by romankozak2
romankozak2
5,782 Points

I've checked my code over five times and still can't figure out why it's not working!

Can someone help me figure out why the photos are not loading?

$(document).ready(function() {
  $("button").click(function() {
    $("button").removeClass("selected");
    $(this).addClass("selected");
    var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animals = $(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.m + '"></a></li>';
      });
      photoHTML += "</ul>";
      $("#photos").html(photoHTML);      
    }
    $.getJSON(flickrAPI, flickrOptions, displayPhotos);
  });
}); //end ready
Per Karlsson
Per Karlsson
12,683 Points
Per Karlsson
Per Karlsson
12,683 Points

Aren't you supposed to pass an argument to your displayPhotos function?

2 Answers

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

If you run the code and look in your console you can see it give's you a specific error. It say's "Uncaught ReferenceError: animal is not defined". Your code:

var animals = $(this).text();  // here you set a variable called animals
    var flickrOptions = { 
      tags: animal, // here you refer to the variable animal which does not exist
      format: "json"
    };

Change animals to animal and you're good to go

romankozak2
romankozak2
5,782 Points
romankozak2
romankozak2
5,782 Points

I always say looking at code to debug is like trying to find that item in the fridge....You look and look and look. Then your wife comes over and says "it's right there".

Thankful for other eyes here. Thanks!!