$ .eachを使用してJSONを繰り返して画像を表示する

Question

検索の後にAPI呼び出しで複数のgifを表示しようとしています。 1つの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のパラメータとして提供され、2番目は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>