Issues with GIPHY API search functionality implementation

Other Questions Giphy
1

My issue:

I’m having trouble with my GIPHY API integration. The search feature doesn’t seem to be working properly and I think there might be an error in my implementation. I’m still learning how to work with APIs so I could really use some guidance.

What I’m trying to achieve:

I want users to be able to search for specific GIFs and display the results on my webpage. Right now the search isn’t functioning as expected.

JavaScript code:

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

//searchTerm = "";

xhrRequest = new XMLHttpRequest;
xhrRequest.open('GET', 'http://api.giphy.com/v1/gifs/search?q=dancing+dog&api_key=dc6zaTOxFJmzC');

xhrRequest.onload = function() {
    if (xhrRequest.status >= 200 && xhrRequest.status < 400){
        response = JSON.parse(xhrRequest.responseText).data.image_url;
        console.log(response);
        document.getElementById("gif_display").innerHTML = '<div><img src = "'+response+'"  title="GIF from Giphy"></div>';
    } else {
        console.log('API request failed with error');
     }
};

xhrRequest.onerror = function() {
    console.log('network connection failed');
};

xhrRequest.send();
});

HTML markup:

<h2> Find Amazing GIFs! </h2>
<div class="search-container">
    <p> Enter your search term below to discover awesome GIFs! </p>
        <form class="search-form">
            <input type="text" id="search-term" class="input-field">
            <button type="submit" class="find_button"> Find GIFs </button>
            <input type="reset" value="Clear">
        </form>
        <div class="results_area animated fadeIn">
            <p id="gif_display"> </p>
        </div>
</div>
2

Found several issues in your code. You’re trying to access image_url on the response, but GIPHY returns an array with different image properties. Plus your search term is hardcoded and not using the form input.

Main problems:

  • response = JSON.parse(xhrRequest.responseText).data.image_url should be response = JSON.parse(xhrRequest.responseText).data[0].images.fixed_height.url
  • You’re not capturing the search input from your form
  • Missing event listener on your search button
  • That API key looks like the old demo one.

But honestly, all this XMLHttpRequest setup and API parsing gets messy fast. Been there.

I’d just set up the whole thing in Latenode instead. You can create a workflow that connects directly to GIPHY’s API, handles search parameters automatically, and processes multiple results. Built-in error handling plus you can easily add caching for popular searches or filter inappropriate content.

I built something similar for our company tool - took maybe 10 minutes to get full search working with result pagination. Way cleaner than wrestling with vanilla JS and API quirks.

Check it out: https://latenode.com