Impossible de boucler via Giphy API Array

Question

J'ai un CodePen utilisant l'API GIPHY qui appelle les GIF en fonction de l'entrée de l'utilisateur. Cela fonctionne sauf qu'il n'appelle que le premier élément d'un tableau. Je réalise parce que cela appelle le premier élément dans un tableau. J'ai essayé de remplacer 0 avec i et j'ai essayé une boucle for mais il ne ferait pas l'appel. Veuillez noter que j'utilise 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

Voici la mise à jour codepen https://codepen.io/anon/pen/dWRbaj

Le problème était dans le foreach, l'élément itéré sur est passé en tant qu'argument de la fonction de rappel que vous fournissez.

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