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

Posted by carinaortiz
carinaortiz
2,358 Points

I can't display any photos and my code is just not working.

Hi!

I'm lost. I don't understand what I'm doing wrong. Can anybody help me with my code and why it's not working?

https://w.trhou.se/rvitu2cit9

Thanks a million!

4 Answers

Jonathan Rhodes
Jonathan Rhodes
8,086 Points
Jonathan Rhodes
Jonathan Rhodes
8,086 Points

At first glance, your $.getJSON should have a second argument of "flickrOptions" as opposed to "animal."

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

In addition to what Jonathan mentioned, there's a handful of mistyped versions of the variable photoHTML that should all be the same.

Here is a working version of your code to compare against:

$(document).ready(function(){
  $("button").click(function(){
    $("button").removeClass("selected");
    $(this).addClass("selected");
      //the ajax part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" ;
    var animal = $(this).text();
    var flickrOptions = {
      tags: animal,
      format: 'json'
    };

    var displayPhotos = function(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>';
      }); //end each

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

    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  });

});
carinaortiz
carinaortiz
2,358 Points
carinaortiz
carinaortiz
2,358 Points

still not working :(

all I get is this:

http://port-80-bgfoj1y9ge.treehouse-app.com/

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Somehow your index.html got moved from the root directory to the js folder. You can drag-n-drop it out of that back into the root and it should work then.

carinaortiz
carinaortiz
2,358 Points
carinaortiz
carinaortiz
2,358 Points

OOOOOH my goood now it works!! Thanks a million guys!!