GIPHY API - How do I search for Giphs?
My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.
How can I get the specific search result that the user searches for?
GitHub link to the Giphy API is here: https://github.com/Giphy/GiphyAPI.
JS
document.addEventListener('DOMContentLoaded', function () {
//q = "";
request = new XMLHttpRequest;
//request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);
request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');
request.onload = function() {
if (request.status >= 200 && request.status < 400){
data = JSON.parse(request.responseText).data.image_url;
console.log(data);
document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data+'" title="GIF via Giphy"></center>';
} else {
console.log('reached giphy, but API returned an error');
}
};
request.onerror = function() {
console.log('connection error');
};
request.send();
});
HTML
<h1> Let's Search Some Gifs! </h1>
<div class="info">
<p> Search below to the wonderful world of Gifs! </p>
<form class="gif-form">
<input type="text" id="form-value" class="search-input-rounded">
<button type="submit" class="search_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>
Answer
Here is a solution with jQuery. For more info please refer to their docs... http://api.jquery.com/
Also note that the Giphy API replies back with a URL to an image, not an image itself. Hence, the <img> tag replaced the <p> you originally used. Use src attribute to render an image with the url.
Check your browser's console log to see how the API response looks.
Below is the full HTML, note that jQuery must always be linked in above your code.
<!DOCTYPE html>
<html>
<head>
<title>Giphy App</title>
</head>
<body>
<h1> Let's Search Some Gifs! </h1>
<div class="info">
<p> Search below to the wonderful world of Gifs! </p>
<form class="gif-form">
<input type="text" id="form-value" class="search-input-rounded">
<button type="submit" class="search_button"> Search for GIFs </button>
<input type="reset" id="reset_button" value="Reset">
</form>
<div class="rando_facts animated bounceIn">
<img id="here_is_gif" src=""/>
</div>
</div>
<!-- Link in jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- My JavaScript -->
<script type="text/javascript">
// This waits for the page to load before calling our jQuery
$( document ).ready(function(){
// Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
$('.search_button').on('click', function(){
// Collect user by grabbing the input form's value via id (#)
var userInput = $('#form-value').val().trim();
// Change the input to suit the API (ie change spaces to +)
userInput = userInput.replace(/ /g, "+");
// Create the Giphy API URL
var queryURL = 'http://api.giphy.com/v1/gifs/search?q=' + userInput + '&api_key=dc6zaTOxFJmzC';
// Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
$.ajax({url: queryURL, method: 'GET'}).done(function(response){
// This is the API response data. It's a JSON object of 25 gifs
console.log(response.data);
// For simplicity, we will take the first gif (ie. at postion 0)
var giphyURL = response.data[0].images.fixed_height.url;
console.log(giphyURL)
// Now you can pass that into your "here_is_gif" <img> tag using its id (#)
$('#here_is_gif').attr('src', giphyURL);
});
// Part 3 - Clear the Gif using the reset_button id (#)
$('#reset_button').on('click', function(){
// Grab the img using the id and change the src to empty to remove the image
$('#here_is_gif').attr("src",'');
})
// If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
return false;
})
});
</script>
</body>
</html>