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

Dongyun Cho
Dongyun Cho
2,256 Points
Posted by Dongyun Cho
Dongyun Cho
2,256 Points

if(photo == null) ?

'''javascript $(document).ready(function() {

$('form').submit(function (evt) { evt.preventDefault(); var $searchField = $('#search'); var $submitButton = $('#submit'); $searchField.prop("disabled", true); $submitButton.prop("disabled", true).val("searching...");

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var term = $searchField.val();
var flickrOptions = {
  tags: term,
  format: "json"
};
function displayPhotos(data) {
  var photoHTML = '<ul>';
  $.each(data.items,function(i,photo) {

    if(photo == null){
    photoHTML += "<p>NO pics</p>");
    } else {
    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);
  $searchField.prop("disabled", false);
  $submitButton.attr("disabled", false).val("Search");

}

$.getJSON(flickerAPI, flickrOptions, displayPhotos); }); // end click

}); // end ready '''

I added some other code as the teacher said at the end of this video. When some picture I wrote in the form is not exist in Flickr, the browser should show us a text saying, there's not a picture that I want. The text "No pics", however, does not turn out. what should I do to fix it?

3 Answers

Tyler Corum
Tyler Corum
3,514 Points
Tyler Corum
Tyler Corum
3,514 Points

Here's what I want you to do to gain a little insight into your program:

Right after this line

function displayPhotos(data) {

put 

console.log(data);

Then do a search for something weird like alkadfgh and see where that insight gets you!

Best of luck!

Tyler Corum
Tyler Corum
3,514 Points
Tyler Corum
Tyler Corum
3,514 Points

If you still get stuck (hint: you'll discover by clicking the triangle, data.items... length: 0).

I include 2 different working solutions of the displayPhotos() function in question. I looked in two places for reference (bookmark these two repositories, developer.mozilla.org and jQuery.com!) http://api.jquery.com/jquery.each/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype

Both solutions are testing working. I just commented out one of them below.

[...]
    function displayPhotos(data) {
      console.log(data);
      var photoHTML = '';
      //if (jQuery.isEmptyObject(data.items)) {
      if (data.items.length === 0) {
        photoHTML += '<li>Nothing found!</li>';
      } else {
        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);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);
[...]
barnetobeka
PLUS
barnetobeka
Courses Plus Student 10,895 Points
barnetobeka
barnetobeka
Courses Plus Student 10,895 Points

$(document).ready(function() {

$('form').submit(function (event) { event.preventDefault(); var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var animal = $("#search").val(); var flickrOptions = { tags: animal, format: "json" }; function displayPhotos(data) { var photoHTML=""; if($.isEmptyObject(data.items) === true){ photoHTML += '<li class="newList">Search not Found</li>'; }else{ $.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 }; $("#photos").html(photoHTML); }; // diasplay photos $.getJSON(flickerAPI, flickrOptions, displayPhotos); }); // end submit

}); // end ready

barnetobeka
PLUS
barnetobeka
Courses Plus Student 10,895 Points
barnetobeka
barnetobeka
Courses Plus Student 10,895 Points

Use the Jquery selector of $.isEmptyObject();