Javascript/API - результат поиска не отображается

Question

Я новичок в работе с API.

Моя проблема: похоже, мой код где-то неверен. Поиск не работает.

Как я могу получить конкретный результат поиска, который ищет пользователь?

Ссылка GitHub на API Giphy находится здесь: https://github.com/Giphy/GiphyAPI.

JS

document.addEventListener('DOMContentLoaded', function () {

//q = "";

var searchTerm = prompt('Please enter a word :)');
searchTerm = searchTerm.trim().replace(/ /g, "+"); // adds a + wherever a space is

request = new XMLHttpRequest;
//request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);
request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=' + searchTerm + '&api_key=dc6zaTOxFJmzC');


request.onload = function() {
    if (request.status >= 200 && request.status < 400){
        data = JSON.parse(request.responseText).data.image_url;
        console.log(data);
        document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center>';
    } else {
        console.log('reached giphy, but API returned an error');

     }
        jQuery(function(){
            $("#form-value").keyup(function() {
              var searchTerm = $("#form-value").val().trim().toLowerCase(); 
              $("#here_is_gif").text(value);
            });
        });
};

request.onerror = function() {
    console.log('connection error');
};

request.send();
});

HTML

<h1> Let's Search Some Gifs! </h1>
<div class="info">
    <p> Search below to the wonderful world of Gifs! </p>
        <form class="gif-form">
            <input type="text" id="form-value" class="search-input-rounded">
            <button type="submit" class="search_button"> Search for GIFs </button>
            <input type="reset" value="Reset">
        </form>
        <div class="rando_facts animated bounceIn">
            <p id="here_is_gif"> </p>
        </div>
</div>

Answer 1

Таким образом, проблема в том, что вы не используете правильный путь объекта через возвращаемые данные:

data = JSON.parse(request.responseText).data;
if(data.length > 0) {
    document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data[0].images.original.url+'" title="GIF via Giphy"></center>'; // use the first image returned... But data is an array, so you might want to loop over it and add more than one image....
}

Кроме того, у вас есть опечатка здесь:

$("#here_is_gif").text(value); // should be $("#here_is_gif").text(searchTerm);

Надеюсь это поможет!