My Javascript page is not getting data from giphy API

Question

I have linked the Giphy API into my app and cannot seem to figure out why the call is not working. I thought perhaps it was my key but I inserted a public key and that still did not work. Am I calling the API incorrectly? I did check the documentation for the giphy API and it looks like im using the correct parameters.

here is my code:

var feelings = ["Angry", "Happy", "Excited", "Confused"];
var currentGif;
var pausedGif;
var animatedGif;
var stillGif;



function createButtons() {

    $('#buttons').empty();

    for(var i=0; i < feelings.length; i++) {

        var showBtn = $('<button>').text(feelings[i]).addClass('showBtn').attr({'data-name' : 
feelings[i]});

        $('#buttons').append(showBtn);
    }


    $('showBtn').on('click', function() {

        $('display').empty();

        var currentFeeling = $(this).data('name');

        var giphyURL = "http://api.giphy.com/v1/gifs/search?q=" + 
currentFeeling + "&api_key=xxx&limit=8";

        $.ajax({

        url: giphyURL,
        method: 'GET'
    }).done(function(giphy) {

        currentGif = giphy.data;

        $.each(currentGif, function(index, value) {

            animatedGif = value.images.original.url;
            pausedGif = value.images.original_still.url;

            var thisRating = value.rating;

            if(thisRating == '') {

                thisRating = 'unrated';
            }

            var rating = $('<h3>').html('Rated: '+ thisRating).addClass('ratingStyle');

            stillGif = $('<img>').attr('data-animated', animatedGif).attr('data-paused', pausedGif).attr('src', pausedGif).addClass('playOnHover');

            var fullGifDisplay = $('<button>').append(rating, stillGif);

            $('#display').append(fullGifDisplay);
        });



    });

    });
}

$(document).on('mouseover', '.playOnHover', function() {

    $(this).attr('src', $(this).data('animated'));
});

$(document).on('mouseleave', '.playOnHover', function() {

    $(this).attr('src', $(this).data('paused'));
});

$('#add-feeling').on('click', function() {

    var newFeeling = $('#feeling-input').val().trim();

    feelings.push(newFeeling);

    createButtons();

    return false;
});

createButtons();

Can you tell me a sample input/params for q=? Or what is currentFeeling expecting? — haMzox, Nov 10 '17 at 06:22
q=sad for example, when i use the URL alone in my browser it works but for some reason but its the call itself thats not working. — lea Calderon, Nov 10 '17 at 06:30

Rahul Sahu · Answer 1 · 2017-11-10T06:49:01.113

0

Hey i have reviwed this code , you use https intsted of http-

var giphyURL = "https://api.giphy.com/v1/gifs/search?q=" + 
currentFeeling + "&api_key=0BScOL3fj1asLChkeb0QOnvJcNr7VbHc&limit=8";

share your search param like //api.giphy.com/v1/gifs/search?q=parameter

edited Nov 10 '17 at 06:49

answered Nov 10 '17 at 06:30

Rahul Sahu

235
1
6

1

you dont use the 's' when calling the API, its only HTTP. Atleast thats what their documentation says – lea Calderon Nov 10 '17 at 06:37
I did try adding the 's' to http and it still does not work – lea Calderon Nov 10 '17 at 07:05

score 0 · Answer 2 · answered Nov 10 '17 at 07:33

0

i figured it out... i was missing classes and id's (#, .).. sigh

answered Nov 10 '17 at 07:33

lea Calderon

21
1
1
3

My Javascript page is not getting data from giphy API

2 Answers2