Search code examples
jqueryajaxeachgetjsonflickr

flickr api search not displaying images

When I click the search button and view the net tab in firebug it shows that the JSON objects are being returned, but I cannot get them to load into my browser to view. If I piece together the parts of "var url" into the address bar it also works. I think the error might have something to do with the last function but I cannot figure it out.

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">     
  <style>
  img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>   
</head>
<body>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>      
<script>
  $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.items, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});
</script>
</body>
</html>
Solution

  • It seems that Flickr API has been changed and your example is outdated.

    You just need to investigate what data is coming from API using Google Chrome developer console or using breakpoints and watches.

    enter image description here

    enter image description here

    There is a working snippet:

      $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.photos.photo, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});
      img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>