質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.35%

2つの異なるテーブルのデータを同一のviewに作成時間順に表示させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 263

tomoZQ

score 2

前提・実現したいこと

railsでグループが作成でき、その中で以下2つのことができるアプリを開発しています。
①グループメンバー同士のチャット
②グループごとに場所(store)を登録でき、そのstoreについてメンバーがコメントをすることができる。
チャットにはmessageテーブル、storeに対してのコメントはinformというテーブルを設けています。
チャット画面:views/messages/index
informが作成された時にviews/messages/indexにも表示をさせたいと思い、messageControllerのindexアクションに@informを定義することでviews/messages/indexにinformを表示させることはできました。
表示順をmessage,informどちらもを含んだ作成された順に並べたいです。

発生している問題・エラーメッセージ

現状作成されたinformは全ての下に追加され、画面をリロードするとmessageが上、informが下のように別れてしまいます。
1.store#createでinformを作成
→informs/index, messages/indexに表示される。
2.messages/indexでmessageをcreate(非同期通信)
→messages/indexの1で表示されたinformの下にスクロールして表示。
3.画面をリロード
→messageが上、informが下に別れてしまう。

エラー文はありません。

該当のソースコード

#messageController (index, create)
def index
    @message = Message.new
    @messages = @group.messages.includes(:user).order("created_at DESC")
    @informs = Inform.where(params[:group_id])
end

def create
    @message = @group.messages.new(message_params)
    if @message.save
      respond_to do |format|
        format.json
      end
    else
      @messages = @group.messages.includes(:user)
      flash.now[:alert] = 'メッセージを入力してください。'
      render :index
    end
end
.show-lists__chat-main
    .show-lists__chat-main__message-lists
      .show-lists__chat-main__message-lists__contents
        - @group.messages.each do |message|
          .show-lists__chat-main__message-lists__contents__content
            .show-lists__chat-main__message-lists__contents__content__left
              .show-lists__chat-main__message-lists__contents__content__left__name
                = message.user.name
              .show-lists__chat-main__message-lists__contents__content__left__text
                = message.content
                = image_tag message.image.url, class: '.show-lists__chat-main__message-lists__contents__content__left__text__img' if message.image.present?
            .show-lists__chat-main__message-lists__contents__content__right
              .show-lists__chat-main__message-lists__contents__content__right__time-stamp
                = message.created_at
        -if @informs
          - @informs.each do |inform|
            .show-lists__chat-main__message-lists__contents__content1
              .show-lists__chat-main__message-lists__contents__content1__left
                .show-lists__chat-main__message-lists__contents__content1__left__name
                  = inform.user.name
                .show-lists__chat-main__message-lists__contents__content1__left__store-name
                  = inform.store.name
                .show-lists__chat-main__message-lists__contents__content1__left__text
                  = inform.content
              .show-lists__chat-main__message-lists__contents__content1__right
                .show-lists__chat-main__message-lists__contents__content1__right__time-stamp
                  = inform.created_at
$(function(){
  function buildHTML(message){
    if (message.image) {
      let html = `
                    <div class="show-lists__chat-main__message-lists__contents__content">
                      <div class="show-lists__chat-main__message-lists__contents__content__left">
                        <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                          ${message.user_name}
                        </div>
                        <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                          ${message.content}
                          <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}">
                        </div>
                      </div>
                      <div class="show-lists__chat-main__message-lists__contents__content__right">
                        <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                          ${message.created_at}
                        </div>
                      </div>
                    </div>
                  `
      return html;
    } else {
      let html = `
                      <div class="show-lists__chat-main__message-lists__contents__content">
                        <div class="show-lists__chat-main__message-lists__contents__content__left">
                          <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                            ${message.user_name}
                          </div>
                          <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                            ${message.content}
                          </div>
                        </div>
                        <div class="show-lists__chat-main__message-lists__contents__content__right">
                          <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                            ${message.created_at}
                          </div>
                        </div>
                      </div>
                  `
      return html
    }
}
  $(function(){
    $('.chat-main__message-form__Form').on("submit", function(e){

      e.preventDefault();
      let formData = new FormData(this);
      console.log(formData)
      let url = $(this).attr('action');

      $.ajax({
        url: url,  //同期通信でいう『パス』
        type: 'POST',  //同期通信でいう『HTTPメソッド』
        data: formData,  
        dataType: 'json',
        processData: false,
        contentType: false
      })

    .done(function(data){
      let html = buildHTML(data);
      $('.show-lists__chat-main__message-lists__contents').append(html);
      $('form')[0].reset();
      $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight});
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    })
    .fail(function() {
      alert("メッセージ送信に失敗しました");
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
  });
  })

})
});

試したこと

hamlを見る限り画面をリロードするとこのように並んでしまうことはわかるのですが、どうすれば間にinformを入れていけるのかがわかりません。
messageのeach文の直下にinformのeach文を入れて、各inform.name, inform.contentを記述してみましたが、messageとinformが合成されて表示されるだけでした。

補足情報(FW/ツールのバージョンなど)

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

そりゃそうです。viewが
- @group.messages.each do |message|  -if @informs    - @informs.each do |inform|となってますから、まず messagesをかきその後にinformを書くようになってます。
ごちゃまぜにするなら、@models = (@group.messages + @informs).sort_by{|model| model.created_at} としておいて
@models.each do |model としてmodelを処理します。
厄介なのは message と inform でどのcolumnを書き出すのか、が異なること
スマートでないですが
- if model.is_a?(Message)     message の 記述  - else     infoの記述
とする。
viewを見やすくしたいなら、Message、Informsの双方に、
例えばMessageには
def column1 ; user.name ; end  def column2 ; content; end  def column3 ; image.url;end  def column4 ; created_at ;end
のようなのを作ってviewで = model.column1 で済ませる。
columnにかぶせる classが同じでないとだめだけど、
show-lists__chat-main__message-lists__contents__content1__left__store-name
こんなclass名使ってる?自動生成っぽい。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/19 16:55

    ありがとうございます。
    上記記述で思い通りの表示をさせることができました。
    ```
    @models = (@○○ + @○○).sort_by{|model| model.created_at}
    ```
    ```
    - if model.is_a?(Message)
    message の 記述
    - else
    infoの記述
    ```
    の記述、よく覚えておくように致します。

    キャンセル

  • 2020/07/19 18:46 編集

    記憶に留めて欲しいのはむしろ「厄介なのは message と inform でどのcolumnを書き出すのか、が異なること」
    同じ位置に書き出すことになるものは同じ名前にしておきましょう。
    ダックタイピングっていいます(ちょっと違うかもですが)

    キャンセル

  • 2020/07/19 22:30

    承知致しました。ご指導ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る