无法循环通过Giphy API阵列

我有一个CodePen利用GIPHY API，基于用户输入调用GIF。它的工作原理除了只调用数组中的第一项。我意识到，因为这是调用数组中的第一项。我试图用我替换0，并试图进行循环，但它不会打电话。请注意我正在使用jQuery。无法循环通过Giphy API阵列

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>'); 

} 
}); 

}) 


});

来源

2017-05-01 user5854648

这里是更新codepen https://codepen.io/anon/pen/dWRbaj

问题在foreach中，被迭代的项目作为参数传递给您提供的回调函数。

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

来源

2017-05-01 22:49:50 Karthik

无法循环通过Giphy API阵列

回答

相关问题