CODEWITHSUNDEEP
ruby-on-railsajaxd3.js
claude computing
claude computing

Reputation: 329

third party API data for ruby on rails web application

I have a ruby on rails web application that uses third party API which provides some data that I want to visualize using d3. What would be the best way to gain access to the data? I've only practiced d3.js with static sets of data.

I read How to create d3 graph using data from Rails database and I read up on what AJAX is, but am still a bit lost. If AJAX is indeed the way, could anyone elaborate on the process?

Also when I'm doing this, is it best to use data that my web application has retrieved from the third party API, or should d3 directly fetch data from the third party API? Does it make a big difference?

Upvotes: 3

Views: 3552

Answers (1)

Graham S.
Graham S.

Reputation: 1540

Edit:

To answer you question more directly, it would be better to get the results in Rails first, and then use them in your JavaScript, simply for the sake of keeping it better organized.

Also, making an AJAX call on page load to get the data versus using Rails is that (from experiences I've had), asynchronous calls would not be able to load the data before the JavaScript code tries to access it (if it takes too long). You would have to set the AJAX call to synchronous so that AJAX will return the data first, and then it will execute any following code. If it's a lot of data being returned, it could result in a really long page load, which is bad for the user experience.

You would probably need to use the RestClient gem.

In your Gemfile:

gem 'rest-client'

Then run bundle install.

Afterwards, create a model to use your API with:

rails g model ModelForMyApi

Then run rake db:migrate.

In your ModelForMyApi model:

class ModelForMyApi < ActiveRecord::Base
    require 'rest_client'

    @url

    def self.getData
        response = RestClient(@url, { :content_type => :json, "Api-Key" => "put your API key here" }
    end

    def self.retrieve_results(myParameter)
         @url = "myApiUrl.com/stuff/?putYourParamNameHere=#{myParameter}"
        JSON.parse(ModelForMyApi.getData)
    end
end

So in your controller you can do something like:

class ExamplesController < ApplicationController
    def index
        @results = ModelForMyApi.retrieve_results("superCoolParameter")
    end
end

And in your index.html.erb file to display the results:

<%= @results %>

That will display the entire JSON response. If you want to access the values from the key value pairs, take this example.

Pretend this is what your response looks like:

// This is a Rails JSON object, it has arrows.
// See below for how to incorporate this in your JavaScript
{
    "fruit" => "banana",
    "juice" => "orange juice"
}

Using

<%= @results['fruit']  %>

in your view would display "banana". And that's how I do my API calls with Rails. I don't know how to implement with d3.js, but I think the best approach would be to get the result first from the API, and then include those results in your JavaScript.

Edit

Since you need to use it with JavaScript, parsing the JSON response in Rails may not be the best approach. In this case, it may be better to do it exactly as I stated above, but removing the the JSON.parse() function from the self.retrieve_results method. This will return a normal JSON object instead of a Rails JSON object.

So in ModelForMyApi, remove the JSON.parse from the return line:

class ModelForMyApi < ActiveRecord::Base
    require 'rest_client'

    @url

    def self.getData
        response = RestClient(@url, { :content_type => :json, "Api-Key" => "put your API key here" }
    end

    def self.retrieve_results(myParameter)
         @url = "myApiUrl.com/stuff/?putYourParamNameHere=#{myParameter}"
        ModelForMyApi.getData  #JSON.parse was removed 
    end
end

And in your JavaScript, all you have to do is this:

var jsonObj = #{@results};

// Output to log to see all the results you can play with
console.log(jsonObj);

Then, using the same JSON example from above ({"fruit": "banana", "juice": "orange juice"}), you can access the JSON in your JavaScript, like so:

jsonObj.fruit  // Will output "banana"

Now you can use your API results in your d3.js code.

The reason you need to remove the JSON.parse from the Rails method is because when you use it in your Rails method, it will make your response look like this:

//Javascript cannot interpret the arrows
{
    "fruit" => "banana",
    "juice" => "orange juice"
}

But you need it to look like this:

//JavaScript likes colons. No pun intended.
{
    "fruit": "banana",
    "juice": "orange juice"
}

Upvotes: 9

Related Questions