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

Katie Jordan
Katie Jordan
7,842 Points
Posted by Katie Jordan
Katie Jordan
7,842 Points

Halp! Where is my error? No photos will display and no error is loading in the console https://repl.it/FBBb

https://repl.it/FBBb

2 Answers

Edward Ries
Edward Ries
7,388 Points
Edward Ries
Edward Ries
7,388 Points

I took your code and tweaked it a little. I never quite figured out what was wrong. I changed animal to pull from a text box so I could control the content that was returned. I placed it in a real website and it worked fine. My assumption is that it didn't work for you because you don't have jquery support in the repl environment but I'm unsure.

$(document).ready(function () {

$('button').click(function () {
    $("button").removeClass("selected");
    $(this).addClass("selected");
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $("#animal").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(flickerAPI, flickrOptions, displayPhotos);
});

});

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Marcos Raj
Marcos Raj
Courses Plus Student 5,979 Points

Hello,

on the above code,

var animal = $("#animal").text();

you have used an ID , this may assigned to the buttons, if yes please comment back if no please do the same or just use the below code.

var animal = $(this).text();

Both are working for me.