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

rails6で、APIデータを取得して表示するまでの手順を記述してます。railsのバージョンは6.1.0です。
環境
- OS ubuntu20.10
- ruby 2.7.2
- rails 6.1.0
- Postgresql 13.1 (dockerで構築)
APIデータ作成
Fakerとjson-serverで作成してます。
取得するAPIは、下図の構造となってます。

表示用テンプレート作成
ここではtopというコントローラーを作成してます。
1 |
rails g controller top |
作成した「top_controller.rb」に以下を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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」を作成します。
1 2 3 4 5 6 7 |
id: <%= @id %><br> name: <%= @name %><br> email: <%= @email %><br> zipcode: <%= @zipcode %><br> county: <%= @county %><br> result: <%= @result %><br> error: <%= @message %><br> |
あとは「routes.rb」に以下を追加して、確認してみます。
1 |
get "show", to: "top#show" |
確認
ブラウザから http://プライベートIP or サーバーアドレス:3000/show にアクセスします。

APIから取得したデータが表示されていることが確認できると思います。
全データ取得
全データを取得して表示する場合は、「top_controller.rb」を以下のように編集して、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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」も以下のように編集します。
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
実行結果は、以下の画像の通りとなります。

-
前の記事
javascript ランダムな文字列を指定した桁数生成する 2021.01.18
-
次の記事
C# 文字列を数値に変換可能か判定する 2021.01.19
コメントを書く