10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

中間テーブルを経由して別テーブルから取得した値をviewに反映させる方法

Last updated at Posted at 2020-01-09

chatアプリケーション制作時に、中間テーブルを経由して、別のテーブルから特定の値を出力する方法がわからず、苦しめられたので、その備忘録に。

###やりたいこと
・現在のchatグループのメンバーリストをヘッダーに反映させたい。
(下画像のピンク色の部分)

1.png

hamlは以下の通り

_main_chat.html.haml
.chat-main
  .top
    .top__left-box
      .top__left-box__group-name
        = @group.name
      .top__left-box__members
        -# ここに何を記述すれば良いかが今回の論点
        -# =@group.users.name    左記では上手く呼び出せない
    .top__edit-btn
      = link_to edit_group_path(current_user) do
        = "Edit"

・アソシエーションは以下の通り

models/group.rb
class Group < ApplicationRecord
  has_many :group_users
  has_many :users, through: :group_users
  has_many :messages
end
models/user.rb
class User < ApplicationRecord
  has_many :group_users
  has_many :groups, through: :group_users 
  has_many :messages
end
models/group_user.rb
class GroupUser < ApplicationRecord
  belongs_to :group
  belongs_to :user
end

###方法

任意のカラムの配列を取得する、pluckメソッドを使用する

pluckメソッド:特定のカラムの配列を使用する。
使用方法  @モデル名.pluck(カラム名)

取り出した値を” , ”で区切りたいので、区切り文字をjoinメソッドを使用して指定する。
joinメソッド:配列の各要素の値を文字列に変換し、それらを連結した文字列を作成する。
使用方法  join(指定したい区切り文字)

今回のケースに上記メソッドを当てはめてみる。

_main_chat.html.haml
.chat-main
  .top
    .top__left-box
      .top__left-box__group-name
        = @group.name
      .top__left-box__members
        ="Member:" + @group.users.pluck(:name).join(", ")
        -# "頭に表示したい文字列" + モデル名.users tableへのアソシエーション.pluck(:取り出したいカラム).join("取り出した値の区切り文字")
    .top__edit-btn
      = link_to edit_group_path(current_user) do
        = "Edit"

viewを確認すると

1.png

上手く反映される。

###現状の理解
文字列を + を使って挿入するところなど、もう少しきれいに描けるような気がする。
よりきれいな記述方法がございましたら、ぜひご教示ください。

######参考記事
https://www.javadrive.jp/javascript/array_class/index3.html
https://hyuraku.hateblo.jp/entry/2018/10/09/222026

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?