Giphy API配列をループできません

Question

ユーザー入力に基づいてGIFを呼び出すGIPHY APIを使用しているCodePenがあります。それは配列の最初の項目だけを呼び出す点を除いて動作します。これは配列の最初の項目を呼び出すためです。私は0をiに置き換えようとし、forループを試みましたが、呼び出しを行いませんでした。私はjQueryを使用しています。

https://codepen.io/anon/pen/wdewjL

HTML

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <h1>GIF Search</h1> 
    </div> 
    </div><!-- END ROW--> 

<div class="row"> 
    <div class="col-sm-12 outerWrapper"> 

    <form> 
    <input type="text" id="userQuery" value="" placeholder=""> 
    <br> 
    <button class="btn" type="submit" id="searchButton">Search</button> 


<div class="row"> 
    <div class="col-md-4 col-sm-6"> 
    <div class="search-text"> 
    </div> 

    <div class="img-container"> 
     <a class="img-link" target="_blank" href="#"><img id="searchResults" src="" /></a> 
    </div><!-- END IMG-CONTAINER --> 
    </div><!-- END COL --> 

</div><!-- END ROW --> 
    <a href=giphyURL onclick="redirect" target="_blank">Share</a> 


</div><!-- END CONTAINER --> 

JAVASCRIPTここ

$(document).ready(function(){ 

// Construct the URL 
$('#searchButton').on('click', function(e){ 
e.preventDefault(); 

var queryURL= "https://api.giphy.com/v1/gifs/search?q=" + $('#userQuery').val() + "&api_key=dc6zaTOxFJmzC"; 

var limit = '&limit=24'; 
var q = $('#userQuery').val(); 

// Call API 
$.ajax(
{ 
    type: 'GET', 
    url: queryURL, 
    success:function(response){ 

    // This is the API response data. It's a JSON object of 24 gifs 
    response.data.forEach(function() { 
    var giphyURL = response.data[0].images.fixed_height.url; 
    console.log(giphyURL); 

    var imageResult = $('<img class=img-result src=' + giphyURL + ' />'); 
    imageResult.appendTo($('.img-container')); 

}); 

$('.search-text').html('<p>Search result for ' + q + '</p>'); 

} 
}); 

}) 


}); 

Answer 1

があるcodepen更新 https://codepen.io/anon/pen/dWRbaj

問題はforeach内にありました。反復処理中の項目は、指定したコールバック関数の引数として渡されます。

let data = [1,2,3,4]; 
data.foreach(function(item){ 
    console.log(item); 
})