Search code examples
javascriptjqueryajaxdatabasegiphy-api

Giphy API - can't figure out how to call the data once I've made the AJAX call

I am currently working on a simple website that grabs random gifs using the Giphy API (https://github.com/Giphy/GiphyAPI). Now I'm just practicing, so I am trying to make a very bare bones website. My issue is that I cannot figure out how to correctly grab the data using jQuery. Here is what the data from the API currently looks like when I log it to the console. I can't seem to grab anything at all. How would I take this data? For example, if I wanted the bitly_url of the first result, my first instinct would be take data[0].bitly_url, but that doesn't work. Please help!

igphy_data

Here's my HTML: 

    <body>

<h1 class="animated infinte bounce"> GIFs-A-Go-Go </h1>
    <div class="info">
        <p> Is it GIF with a hard G? Or GIF with a soft G (Jif)? Whatever! Let's get some! </p>
            <form class="zipform">
                <input type="text" class="pure-input-rounded">
                <button type="submit" class="pure_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>

And my jQuery/JS file:

$('.pure_button').click(function(e) { 
e.preventDefault()
    console.log("click noticed")

$.ajax({


    url: "http://api.giphy.com/v1/gifs/search?q=" + $('.pure-input-rounded').val() +  "&api_key=dc6zaTOxFJmzC",
    type: "GET",
    success: function(data) {
        console.log("This works too")
        debugger
        console.log(data[0].bitly_url) // here is where I'm having an issue!


    }
});
});

*Also, the Giphy API key I am using is a public key.

Solution

  • Try changing it to this. "data" is key name within the object and gets confusing using it twice.

    success: function(response) {
    //console.log("This works too")
    //debugger
    console.log(response.data[0].bitly_url);
}