How to show a random GIF of Yoda from Giphy API on the 'welcome/yoda' page in Rails

Other Questions Giphy
1

I’ve managed to get a Yoda translation API working, but I’m facing some issues when trying to display random GIFs on my ‘welcome/yoda’ page. I’ve set up several API calls, yet the GIF images are not appearing as expected on my page. Instead, I’m seeing raw data from the objects instead of the GIF visuals. Currently, my page is displaying this output:

Yoda Says, "Lets gets some gifs already."

#<Giphy::RandomGif:0x007ffae5467e08>
#<unirest::httpresponse:0x007ffae57a23e8>
{"data"=>{"type"=>"gif", "id"=>"PciMitIKp0UjS", "url"=>"http://giphy.com/gifs/yoda-PciMitIKp0UjS", "image_original_url"=>"http://media4.giphy.com/media/PciMitIKp0UjS/giphy.gif", "image_url"=>"http://media4.giphy.com/media/PciMitIKp0UjS/giphy.gif", "image_width"=>"150", "image_height"=>"190"}, "meta"=>{"status"=>200, "msg"=>"OK"}}

In my controller, I’m making a few API calls:

class WelcomeController < ApplicationController
  def yoda
    sentence = params[:sentence]
    @response = Unirest.get "https://yoda.p.mashape.com/yoda?sentence=" + sentence,
        headers:{
        "X-Mashape-Key" => ENV["YODA_KEY"],
        "Accept" => "text/plain"
        }

    @gifpic = Unirest.get "http://api.giphy.com/v1/gifs/search?q=Yoda&api_key=dc6zaTOxFJmzC"
    @gif = Giphy.random('Yoda')
    
    url = "http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=yoda"
    resp = Net::HTTP.get_response(URI.parse(url))
    buffer = resp.body
    @result = JSON.parse(buffer)
  end
end

In my view, I’m trying to render the GIFs:

<p> Yoda Says, "<%= p @response.raw_body %>"</p>
<%= @gif %>
<%= image_tag @gifpic %>
<%= p @result %>
<%= link_to "Back", '/welcome/ask' %>

What steps do I need to take to extract the correct GIF URL from the API response and display it as an actual image?

2

You’re mixing different API approaches and trying to display raw response objects instead of pulling out the actual image URLs. That p helper is for debugging - it’ll just show you object representations, not render anything useful.

With the Giphy gem, you need to grab the URL from the RandomGif object. Do this in your controller:

@gif = Giphy.random('Yoda')
@gif_image_url = @gif.image_url if @gif

Then in your view:

<%= image_tag @gif_image_url if @gif_image_url %>

Ditch the p helper from your Yoda response line - just use <%= @response.raw_body %>. You’re making multiple API calls for the same thing, which is wasteful. Pick one method and stick with it. The Giphy gem is way cleaner than manually parsing JSON.

3

You’re juggling multiple API approaches, but all these different response formats and parsing logic will turn into a nightmare. Skip the Rails view helpers and JSON parsing headaches - automate this instead.

Build an automation that hits Giphy’s API, processes everything, and spits out the image URL however your Rails app wants it. Create a simple webhook endpoint your Rails controller can call rather than hitting the API directly.

Let the automation handle JSON parsing, error checking, and URL extraction. Your Rails controller just makes one HTTP call and gets back exactly what it needs. No more wrestling with nested JSON or hunting for the right image URL in response objects.

Bonus: you can add caching, fallback GIFs when the API craps out, or rotate different Yoda GIFs without touching Rails code. Much cleaner than spreading API logic all over your controller.

Latenode’s good for this kind of API automation: https://latenode.com

4

Your erb syntax is the problem - ditch the p helper around your variables. Just use <%= @response.raw_body %> without wrapping it in p. For the gif, pull out the URL in your controller first: @gif_url = @result['data']['image_url'], then use <%= image_tag @gif_url %> in your view. You’re seeing object references instead of actual content because you’re using the debug helper.

5

You’re trying to pass whole objects or raw JSON to view helpers that only want specific data types. The image_tag helper needs a string URL that points to the actual image file.

Look at your JSON response - you need to pull out the image_url or image_original_url from that nested structure. Change your controller code to parse the response and grab just the URL:

url = "http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=yoda"
resp = Net::HTTP.get_response(URI.parse(url))
buffer = resp.body
result = JSON.parse(buffer)
@gif_url = result["data"]["image_url"]

Then in your view:

<%= image_tag @gif_url if @gif_url %>

The if @gif_url part stops errors when the API call fails. This grabs the actual GIF URL from the JSON and gives it to the image helper, so you’ll see the GIF instead of object references or raw JSON.