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 Stage 4 Challenge Answer

Posted by DJ Bair
DJ Bair
8,028 Points

Cannot load Flickr photos....

Hi there. When I run the below code, I am unable to get either a) A "no results" message, or b) Any search results. any help appreciated!

$(document).ready(function() {


 $('form').submit(function (evt) {
   evt.preventDefault();
   var $searchField = $('#search');
   var $submitButton = $('#submit');

   $searchField.prop("disabled", true);
   $submitButton.attr("disabled", true).val("searching...");


    // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $searchField.val();
    var flickrOptions = {
      tags: animal,
      format: "json"
    };
    function displayPhotos(data) {
      var photoHTML = '<ul>';
      if(data.items !==0){
        $.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
      } else {
          photosHTML += "<p>Sorry man, no results</p>";
      }
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end submit

}); // end ready
DJ Bair
DJ Bair
8,028 Points

I also had similar problems on the previous challenge, and was unable to get any photos to load. Thanks!

4 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

I pulled up my old workspace for this. It used to work when I wrote it but now it doesn't load any photos either. Looking at the response, Flickr sends back a JSON response but the array of photos is empty for any tag. Perhaps we should let Dave McFarland know Flickr changed how they work.

As far as checking for no results it should be if(data.items*.length* !==0) to check for an empty array

DJ Bair
DJ Bair
8,028 Points

Thanks, Seth. That answers why I was not getting an "else" response I suppose.

Dave McFarland We seem to have a problem with the Flickr feed videos! I pulled the JSON page for the public feed, and even the tags I saw listed (i.e. plants) were not returning any results. Hope this helps.

Thanks for the response, Seth.

Andor Nagy
Andor Nagy
12,115 Points
Andor Nagy
Andor Nagy
12,115 Points

Hello

I just finished this cures, and I had the same issue. But I found a way around it.

Instead of passing the "tags" into the ajax data, you can add it to the end of the API url like &tags=dog for example.

$(document).ready(function (){

    // do stuff when the button is clicked.
    $('form').submit(function( evt ) {

        // preventing the form from submission.
        evt.preventDefault();

        var animal = $('#search').val();

        // flickr api url
        var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=" + animal;
        // Flickr options
        var flickrOptions = { 
            format: "json"
        };
        // displayPhotos
        function displayPhotos(data) {
            var photoHTML = "<ul>";

            // Looping through the images
            $.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>';

            }); // ends each

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

        // Running the AJAX
        $.getJSON(flickrAPI, flickrOptions, displayPhotos);

    }); // click button

}); // ends ready.

Using this method displays the photos correctly.

Hope this helps :)

Juan Rivera
Juan Rivera
7,339 Points
Juan Rivera
Juan Rivera
7,339 Points

I have the same problem , while debugging i found that Flickr is returning this URL when a search is performed : "link": "http://www.flickr.com/photos/tags/lions/" if you put it in your browser Flickr says "There isn't anything available to you tagged with "lions". If you manipulate the URL to this https://www.flickr.com/search/?tags=lions it would work , but i don't know how to do it in the code. I also need Help.

Daniel Maldonado
Daniel Maldonado
18,756 Points
Daniel Maldonado
Daniel Maldonado
18,756 Points

This is still not working. I'm not getting any photos via search, nor am I getting any console.log errors...