jquery API请求错误/不显示giphy

Question

我不知道我的代码出了什么问题，为什么我的API/AJAX调用不能显示我所调用的图像。当I console.log(结果)调用这10个图像时，它会出现，但它们不会显示。下面是我的jquery代码。//当窗口加载时...函数将发生window.onload = function(){

var musiciansList = [];
var inputBox = $('#submitButton')

//whatever musician the user submits will appear
$('#submitButton').on('click', function(){
    var input=$('#submitButton');
    var userInput=inputBox.val();
    musiciansList.push(userInput);
    renderButtons();
});

function renderButtons() {
        var button = $('<button>');
        button.text(musiciansList[musiciansList.length-1]);
        button.addClass('band')
        $('.container').append(button);

};

//When I click this button a function will happen
$(document).on('click', '.band', function() {

//variable queryUrl for giphy
var queryUrl = "http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10";

    //requesting information giphy
    $.ajax({
        url: queryUrl,
        method: 'GET'
    })//recieving information from giphy
    .done(function(response) {      
        //returns the response from the website
        var results = response.data;
        var imageUrl = response.data.image_original_url; 
        var musicians = $('<img>');         
        console.log(queryUrl)

        //takes var musicians and adds attr src and imageUrl
        musicians.attr('src', imageUrl);
        musicians.attr('alt', 'musician');
        $("#images").push(imageUrl)

        //prepend puts the images in the beginning
        $("#images").prepend(imageUrl);
        $('<img>').val();
        console.log(results)
        console.log(imageUrl)   


        //empty gifs button
        $('#clearButton').click(function(event){
            $(musicians).remove()

        });
    });
});

}；

Answer 1

所以看起来你有几个错误。

第一个看起来像是您对giphy API的使用。如果您在浏览器中转到http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10，您可以看到数据是如何返回的。数据以GIF对象数组的形式返回，每个对象都有一个" images“属性，该属性具有可供选择的各种图像。而不是像这样访问图像

var imageUrl = response.data.image_original_url; 

您需要遍历response.data数组并获取一个图像，如下例所示

var imageUrl = response.data[i].images.fixed_height.url; 

您的另一个问题是将您创建的图像元素附加到DOM。您添加的是imageUrl变量(这只是图像URL的值)，而不是您创建的存储在musicians变量中的img元素(这也必须是您循环的一部分)。此外，还包括：

$("#images").push(imageUrl)

//prepend puts the images in the beginning
$("#images").prepend(imageUrl);
$('<img>').val();

都可以重构为一行代码

$("#images").prepend(musicians);

您的最终结果应该类似于：

    for(var i = 0; i < response.data.length; i++){
        var imageUrl = response.data[i].images.fixed_height.url; 
        var musicians = $('<img>');         

        //takes var musicians and adds attr src and imageUrl
        musicians.attr('src', imageUrl);
        musicians.attr('alt', 'musician');

        //prepend puts the images in the beginning
        $("#images").prepend(musicians);
    }