Search code examples
javascriptjsonajaxapiflickr

Why is this simple JavaScript program only fetching 1 result instead of the specified 25 I'm requesting?

I have created a simple one page APP using Flickr API to display 25 images based on the keywords typed in the search box. Each new search should replace the previous search results within the div. It works, however, I am only getting one image to post instead of the 25 I have requested "per_page".

I originally tried to use the append method which got me my 25 images, however as expected, instead of refreshing with each new search, it just added the new results to the bottom of the previous results. I also tried the empty() method to clear the results but I was still only getting one image to post. I then tried .replaceWith() and got no results at all. I'm beginning to ask myself if perhaps the order of my code is causing the problem.

EDIT: This works if I use ".append" instead of ".html" however it does not clear the #images div and replace the old data.

<body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">
     <div id="images"></div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {
       $("#submit").click(function (event) {
         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE//c&nojsoncallback=1";
         $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           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').html('<img src="' + url + '"/>');
          });

        });
     });    
     });
  </script>

My expected outcome was to have the Flickr API post 25 pictures based on what is typed into the search box. If the user performs a new search, 25 new results should replace the previous results.

Solution

  • emptying the #images element before looping over the return data. then append each element inside the loop to the #images div

    <body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">
     <div id="images"></div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {
       $("#submit").click(function (event) {
         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE//c&nojsoncallback=1";
         $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           format: "json"
         },  
           function( data ) {
           $('#images').empty(); //clear div here
           $.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 + '"/>'); //append data here
          });

        });
     });    
     });
  </script>