rails6 APIデータを取得して表示する

作成日 2021.01.18
rails
Rails6

rails6で、APIデータを取得して表示するまでの手順を記述してます。railsのバージョンは6.1.0です。

1. 環境
2. APIデータ作成
3. 表示用テンプレート作成
4. 確認
5. 全データ取得

環境

OS ubuntu20.10
ruby 2.7.2
rails 6.1.0
Postgresql 13.1 (dockerで構築)

docker composeを使ってPostgreSQLを構築する

APIデータ作成

Fakerとjson-serverで作成してます。

Fakerとjson-serverの使い方

取得するAPIは、下図の構造となってます。

表示用テンプレート作成

ここではtopというコントローラーを作成してます。

rails g controller top

作成した「top_controller.rb」に以下を追加します。

def show
  # パラメーターを設定
  params = URI.encode_www_form({ id: "1" })
  # URIを設定
  uri = URI.parse("http://192.168.xxx.xxx:3001/users?#{params}")

  @query = uri.query

  response = Net::HTTP.start(uri.host, uri.port) do |http|
    # 接続時の待機時間
    http.open_timeout = 10
    # ブロックする最大秒数
    http.read_timeout = 20
    # APIをリクエスト
    http.get(uri.request_uri)
  end
  # 例外処理
  begin
    @result = JSON.parse(response.body)

    @id = @result[0]["id"]
    @name = @result[0]["name"]
    @email = @result[0]["email"]
    @zipcode = @result[0]["zipcode"]
    @county = @result[0]["county"]

    # エラー処理
  rescue => e
    @message = "e.message"
  end
end

「app/views/top」配下に「show.html.erb」を作成します。

id: <%= @id %><br>
name: <%= @name %><br>
email: <%= @email %><br>
zipcode: <%= @zipcode %><br>
county: <%= @county %><br>
result: <%= @result %><br>
error: <%= @message %><br>

あとは「routes.rb」に以下を追加して、確認してみます。

get "show", to: "top#show"

確認

ブラウザから http://プライベートIP or サーバーアドレス:3000/show にアクセスします。

APIから取得したデータが表示されていることが確認できると思います。

全データ取得

全データを取得して表示する場合は、「top_controller.rb」を以下のように編集して、

def show
  uri = URI.parse("http://192.168.100.67:3001/users")

  @query = uri.query

  response = Net::HTTP.start(uri.host, uri.port) do |http|
    # 接続時の待機時間
    http.open_timeout = 10
    # ブロックする最大秒数
    http.read_timeout = 20
    # APIをリクエスト
    http.get(uri.request_uri)
  end
  # 例外処理
  begin
    @results = JSON.parse(response.body)

    respond_to do |format|
      format.html { render :show }
      format.json
    end

    # エラー処理
  rescue => e
    @message = "e.message"
  end
end

「show.html.erb」も以下のように編集します。

<table>
<% @results.each do |result| %>
    <tr>
    <td><%= result["id"] %></td>
    <td><%= result["name"] %></td>
    <td><%= result["email"] %></td>
    <td><%= result["zipcode"] %></td>
    <td><%= result["county"] %></td>
    </tr>
<% end %>
</table>

実行結果は、以下の画像の通りとなります。