Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Railsで1対多のテーブルデータを取得し表示させる

More than 3 years have passed since last update.

Railsを使って不動産サイトを作成しています。

rubyとrailsのバージョンは以下になります。

  • ruby 2.3.0
  • rails 5.0.1

物件一覧画面で、物件の子である空室の情報も取得しビューに表示させたいと思います。
ショッピングサイトであれば、1つの注文に商品が複数あるような場合です。

完成画面

完成形の画面は以下になります。
スクリーンショット 2017-04-01 12.10.03.png

上記のように物件1に対し部屋が多紐づいて表示されます。

ER図

テーブルのER図は以下になります。
スクリーンショット 2017-04-01 19.29.24.png

コントローラ

コントローラの記述は以下になります。

app/controllers/rentals_controller.rb
class RentalsController < ApplicationController
  def index
    @rentals = Rental.all.includes(:rooms)
  end
end

モデル

Rentalモデルの記述は以下になります。

app/models/rental.rb
class Rental < ApplicationRecord
  has_many :rooms
end

Roomモデルの記述は以下になります。

app/models/room.rb
class Room < ApplicationRecord
  belongs_to :rental
end

ビュー

ビューの記述は以下になります。

app/views/rentals/index.html.erb
<% @rentals.each do |rental| %>
    <div class="list_property">
        <h4><%= rental.name %></h4>
        <%= image_tag 'commons/image_sample.png', :width => '216', :height => '162', :class => 'img' %>
        <ul>
            <li>
                <dl>
                    <dt>住所</dt>
                    <dd><%= rental.address1 %><%= rental.address2 %></dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>交通</dt>
                    <dd>
                        <%= rental.traffic %>
                    </dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>築年</dt>
                    <dd><%= rental.built %></dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>階数</dt>
                    <dd><%= rental.floor %></dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>構造</dt>
                    <dd><%= rental.structure %></dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>向き</dt>
                    <dd><%= rental.direction %></dd>
                </dl>
            </li>
        </ul>
        <div>
            <ol>
                <li>賃料</li>
                <li>間取り</li>
                <li>専有面積</li>
                <li>所在階</li>
                <li>詳細</li>
                <li>検討リスト</li>
            </ol>
            <% rental.rooms.each do |room| %>
                <ul>
                    <li><strong><%= room.fee %></strong></li>
                    <li><%= room.layout %></li>
                    <li><%= room.exclusive_area %>㎡</li>
                    <li><%= room.floor_position %>階</li>
                    <li><a href="#">詳細を見る</a></li>
                    <li><a href="#">追加する</a></li>
                </ul>
            <% end %>
        </div>
    </div>
<% end %>

上記でRentalの子であるRoomの情報も取得しビューに表示させることができます。

bitarx
京都でWeb制作をしています。
https://bitarx.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away