無法循環通過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陣列

回答

相關問題