JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

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

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,318 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

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.

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.

Andor Nagy
Andor Nagy
9,224 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 :)

Daniel Maldonado
Daniel Maldonado
15,673 Points

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