使用$ .each遍歷JSON以顯示圖像

Question

我試圖在搜索後通過API調用顯示多個gif。我能夠讓代碼工作，當我只想顯示一個gif，但我正在尋找迭代JSON文件並顯示多個gif。

我試圖使用$ .each，但每當我做我得到未定義的相關錯誤的組合。我已經嘗試了在JSON數組內調用數據的各種組合，但仍然無法使其工作。

$(document).ready(function(){ 
 
$('#gif-search-button').click(function (evt){ 
 
    
 
    evt.preventDefault(); 
 
    
 
    var url ='http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC'; 
 
    var gifRequest = 'q=' + $('#gif-search').val(); 
 
    gifCallback = function (data) { 
 
     var returnedgif = '<div>'; 
 
     
 
     $.each(data, function(index, gif){ 
 
      
 
      
 
     returnedgif += '<a href="' + gif.data.url + '">'; 
 
     returnedgif += '<img id="resultGif" src="' + gif.data.images.fixed_height.url + '"></a>'; 
 
      console.log(returnedgif) 
 
     }) 
 

 
      returnedgif += '</div>' 
 
      
 
      $('#resultGif').html(returnedgif); 
 
     
 
    } //End of callback function  
 
    
 
    $.getJSON(url, gifRequest, gifCallback); 
 
     
 
    
 
}); //End of click event 
 
    });

<div class="container"> 
 
      
 
      <form class='form-group search-form'> 
 
       
 
       <div class="grid"> 
 
       
 
        <div class="row">  
 
        <div class="col-sm-4" > 
 
         <label for="gif-search" class='lead'>What type of gif are you looking for?</label> 
 
         <input type="text" id="gif-search" class="form-control" placeholder='dancing bears' /> 
 
        </div> 
 
        </div> 
 
        
 
        <div class="row"> 
 
         <button type="submit" class='btn btn-danger search-form' id="gif-search-button">Find that gif</button> 
 
        </div>  
 

 
       </div> 
 
       
 
      </form> 
 
     
 
      
 
      <div id="resultGif"> 
 
     
 
      
 
      </div> 
 
      
 
      
 
     </div> 
 

 

 

 

 

 
    
 
     
 
     
 
     
 

 
    

Answer 1

不要在迭代如下：

$.each(data.data, function(index, gif){ 

的問題是，響應來自於以下結構

• 數據

  • GIF1

  • ...

  • gifN

因此，在你的代碼，你應該遍歷data.data作爲第一data從getJSON返回的變量作爲參數提供給gifCallback，第二個是API回報。

$(document).ready(function(){ 
 
$('#gif-search-button').click(function (evt){ 
 
    
 
    evt.preventDefault(); 
 
    
 
    var url ='http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC'; 
 
    var gifRequest = 'q=' + $('#gif-search').val(); 
 
    gifCallback = function (data) { 
 
     var returnedgif = '<div>'; 
 
     
 
     $.each(data.data, function(index, gif){ 
 
      
 
     returnedgif += '<a href="' + gif.url + '">'; 
 
     returnedgif += '<img id="resultGif" src="' + gif.images.fixed_height.url + '"></a>'; 
 
      console.log(returnedgif) 
 
     }) 
 

 
      returnedgif += '</div>' 
 
      
 
      $('#resultGif').html(returnedgif); 
 
     
 
    } //End of callback function  
 
    
 
    $.getJSON(url, gifRequest, gifCallback); 
 
     
 
    
 
}); //End of click event 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
      
 
      <form class='form-group search-form'> 
 
       
 
       <div class="grid"> 
 
       
 
        <div class="row">  
 
        <div class="col-sm-4" > 
 
         <label for="gif-search" class='lead'>What type of gif are you looking for?</label> 
 
         <input type="text" id="gif-search" class="form-control" placeholder='dancing bears' /> 
 
        </div> 
 
        </div> 
 
        
 
        <div class="row"> 
 
         <button type="submit" class='btn btn-danger search-form' id="gif-search-button">Find that gif</button> 
 
        </div>  
 

 
       </div> 
 
       
 
      </form> 
 
     
 
      
 
      <div id="resultGif"> 
 
     
 
      
 
      </div> 
 
      
 
      
 
     </div>