无法遍历Giphy阵列

Question

我有一个使用GIPHY的CodePen，该API基于用户输入调用GIF。它可以工作，除非它只调用数组中的第一个项。我意识到这是因为这是调用数组中的第一项。我尝试用i替换0，并尝试使用for循环，但它无法进行调用。请注意，我正在使用jQuery。

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

<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

下面是更新的代码依赖程序https://codepen.io/anon/pen/dWRbaj

在foreach中出现了问题，被迭代的项作为您提供的回调函数的参数传入。

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