JavaScript application not receiving response from Giphy API endpoint

Other Questions Giphy
1

I’m having trouble with my JavaScript app that connects to the Giphy API. The API request seems to fail and I can’t get any data back. I tried using different API keys including the public demo key but nothing works. Maybe there’s something wrong with how I’m making the request?

Here’s my JavaScript code:

var emotions = ["Mad", "Cheerful", "Thrilled", "Puzzled"];
var currentImage;
var staticImage;
var movingImage;
var frozenImage;

function buildButtons() {
    $('#button-container').empty();
    
    for(var j=0; j < emotions.length; j++) {
        var displayBtn = $('<button>').text(emotions[j]).addClass('displayBtn').attr({'data-emotion' : emotions[j]});
        $('#button-container').append(displayBtn);
    }
    
    $('.displayBtn').on('click', function() {
        $('#results').empty();
        
        var selectedEmotion = $(this).data('emotion');
        var apiURL = "https://api.giphy.com/v1/gifs/search?q=" + selectedEmotion + "&api_key=dc6zaTOxFJmzC&limit=10";
        
        $.ajax({
            url: apiURL,
            method: 'GET'
        }).done(function(response) {
            currentImage = response.data;
            
            $.each(currentImage, function(i, item) {
                movingImage = item.images.original.url;
                frozenImage = item.images.original_still.url;
                
                var contentRating = item.rating;
                
                if(contentRating == '') {
                    contentRating = 'no rating';
                }
                
                var ratingLabel = $('<h3>').html('Rating: '+ contentRating).addClass('rating-text');
                staticImage = $('<img>').attr('data-moving', movingImage).attr('data-frozen', frozenImage).attr('src', frozenImage).addClass('hoverPlay');
                
                var imageContainer = $('<div>').append(ratingLabel, staticImage);
                $('#results').append(imageContainer);
            });
        });
    });
}

$(document).on('mouseenter', '.hoverPlay', function() {
    $(this).attr('src', $(this).data('moving'));
});

$(document).on('mouseleave', '.hoverPlay', function() {
    $(this).attr('src', $(this).data('frozen'));
});

$('#add-emotion').on('click', function() {
    var newEmotion = $('#emotion-input').val().trim();
    emotions.push(newEmotion);
    buildButtons();
    return false;
});

buildButtons();

Can anyone spot what might be causing the API call to fail? I followed the Giphy documentation but still no luck getting the images to load.

2

your api key’s probably expired or deprecated. giphy updated their requirements recently, so grab a fresh key from their developer portal. also add .fail() error handling to see what’s actually breaking.

3

Just hit this same issue three weeks ago. Yeah, the API key’s dead, but there’s another problem no one’s talking about.

Once you grab your new key from Giphy’s dev portal, check you’re actually getting data back before looping through it. Your code assumes the API call worked and jumps straight to processing response.data.

I always drop a quick console.log at the top of that .done() function:

.done(function(response) {
    console.log('API response:', response);
    currentImage = response.data;
    // rest of your code
})

Lets you see if Giphy’s sending what you expect. Sometimes they return empty arrays or tweak the structure.

That jQuery syntax works but modern browsers handle fetch() way better with Giphy’s API. Had weird caching problems with $.ajax that disappeared when I switched to fetch.

4

Your API key is the old public demo key that Giphy killed years ago. That’s why it’s failing.

Honestly though, why mess with API keys and rate limits? Just automate the whole thing. I’ve built similar apps and dealing with API authentication gets annoying fast.

What works way better: set up automation that handles Giphy calls on the backend. Send the emotion from your frontend, automation grabs the GIFs and returns exactly what you need. No exposed API keys in JavaScript, no CORS headaches, and you can easily add caching or fallbacks.

I did this exact thing last month for a client. The automation watches for requests, hits Giphy’s API with proper auth, filters by rating if needed, and returns clean JSON. Takes like 10 minutes to set up and kills all the API headaches.

Your frontend code barely changes - just point your AJAX call to the automation endpoint instead of hitting Giphy directly.

5

That API key (dc6zaTOxFJmzC) is the old public beta key Giphy killed off ages ago. Hit the same problem two years back on a similar project. You’ll need to grab a proper API key from their developer dashboard. Once you’ve got the new key, throw some basic error handling on that AJAX call - maybe a .fail() method to catch and log errors so you can see what’s breaking. Check the browser console for CORS issues too, though Giphy’s pretty good about that. Your code structure looks fine otherwise. Swap the key, add error handling, and you’re set.

6

Had this exact same problem last year building a meme generator. Your API call looks fine, but that dc6zaTOxFJmzC key’s been dead forever. You’ll need a fresh key from developer.giphy.com, but also check if your browser’s blocking the requests. Ad blockers love killing Giphy calls - they think it’s tracking.

Open your network tab in dev tools and watch what happens when you click those buttons. You should see the actual HTTP codes. Getting 403s? Dead API key. No requests showing up at all? Something’s blocking them. Try an incognito window to see if it’s an extension messing with you.