CODEWITHSUNDEEP
javascripthtml
Suvra.D
Suvra.D

Reputation: 91

Javascript Fetch Giphy Api

I am trying to fetch Gif Image through Fetch API. But my code is not working. I'm new to working with API's. Please have a look at my code and help me. Here is my code :

<!DOCTYPE html>
<html>
<head>
	<title>Fetch API</title>
	
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
  </script>
</head>
<body>

	<script>	
		let giphyAPI = "https://github.com/Giphy/GiphyAPI/raw/master/api_giphy_header.gif";

		function setup(){

			fetch(giphyAPI)
			.then(response => {
				return response.json();
			})
			.then(json => {
				createImg(json.data[0].images.original.url);
			})
      
			.catch(err => console.log(err));

		}
	</script>

</body>
</html>

Upvotes: 0

Views: 4673

Answers (1)

lordoftheFlies
lordoftheFlies

Reputation: 56

The first thing you should do when working with APIs is refer to their documentation to find out what exactly is needed to interact with that API: here's a link to the giphy api documentation

As you can see, the giphy API requires you use an API key, which i don't see in your code so I will assume you didn't generate one yet.

Second of all, the URL that you're using isn't the actual giphy API url, but rather a direct link to that GIF. I would refer to the example in the documentation link i shared above to understand how to interact with this API. this is the actual API url from the example:

" http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=YOUR_API_KEY&limit=5"

Pay attention to how that API url is structured, as each part of it affects your results. If you scroll to the "Technical Documentation / Specifications" portion of the docs it will explain to you what "gifs/search" , "q", "api_key", and "limit" mean. Some general API url pieces to understand are the following

"?" : indicates the beginning of a query. a query for API is just a param=value pair. in this case ?q=ryan+gosling just tells the API to search for gifs that have that string in it

"&" : is used for concatenation of different parameters for that query.

here are some general steps for you to follow to get this to work

STEP 1: Go to https://developers.giphy.com/ and create an app. Copy the API key and store it in a variable in your javascript ( NOTE: this isn't best practice because in a public/production application you DO NOT want your API keys exposed, but for the purpose of an educational exercise its fine)

STEP2: Read through the docs to figure out what kind of query you'd like to do and structure your API url accordingly. Store that URL in a variable. Concatenate your apiKey variable where it belongs in the url. Alterantively you can just copy and paste the api key directly in the url.

STEP3: that's it the code you provided should work with these small changes. I provided a working example (you will need to enter your own api key), but I would suggest you try to do it on your own before using it as reference. 

<!DOCTYPE html>
    <html>
    <head>
        <title>Fetch API</title>

      <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous">
      </script>
    </head>
    <body>
      <h1>open the console to see the result</h1>
        <script>    
          let apiKey= 'ENTER YOUR API KEY HERE'
            let giphyAPI = `https://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=${apiKey}&limit=5`;

            function setup(){

                fetch(giphyAPI)
                .then(response => {
                    return response.json();
                })
                .then(json => {
                  console.log(json)
                    console.log(json.data[0].images.original.url);
                })

                .catch(err => console.log(err));
            }
            setup();
        </script>

    </body>
    </html>

Upvotes: 2

Related Questions