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

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

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

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);
[...]

Use the Jquery selector of $.isEmptyObject();

$(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