CODEWITHSUNDEEP
jqueryajaxeachgetjsonflickr
user5108240
user5108240

Reputation: 23

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>

Upvotes: 2

Views: 806

Answers (1)

Vlad DX
Vlad DX

Reputation: 4730

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>

Upvotes: 1

Related Questions