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

前提・実現したいこと

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が下に別れてしまう。

エラー文はありません。

該当のソースコード

ruby
1#messageController (index, create)
2def index
3    @message = Message.new
4    @messages = @group.messages.includes(:user).order("created_at DESC")
5    @informs = Inform.where(params[:group_id])
6end
7
8def create
9    @message = @group.messages.new(message_params)
10    if @message.save
11      respond_to do |format|
12        format.json
13      end
14    else
15      @messages = @group.messages.includes(:user)
16      flash.now[:alert] = 'メッセージを入力してください。'
17      render :index
18    end
19end

haml
1.show-lists__chat-main
2    .show-lists__chat-main__message-lists
3      .show-lists__chat-main__message-lists__contents
4        - @group.messages.each do |message|
5          .show-lists__chat-main__message-lists__contents__content
6            .show-lists__chat-main__message-lists__contents__content__left
7              .show-lists__chat-main__message-lists__contents__content__left__name
8                = message.user.name
9              .show-lists__chat-main__message-lists__contents__content__left__text
10                = message.content
11                = image_tag message.image.url, class: '.show-lists__chat-main__message-lists__contents__content__left__text__img' if message.image.present?
12            .show-lists__chat-main__message-lists__contents__content__right
13              .show-lists__chat-main__message-lists__contents__content__right__time-stamp
14                = message.created_at
15        -if @informs
16          - @informs.each do |inform|
17            .show-lists__chat-main__message-lists__contents__content1
18              .show-lists__chat-main__message-lists__contents__content1__left
19                .show-lists__chat-main__message-lists__contents__content1__left__name
20                  = inform.user.name
21                .show-lists__chat-main__message-lists__contents__content1__left__store-name
22                  = inform.store.name
23                .show-lists__chat-main__message-lists__contents__content1__left__text
24                  = inform.content
25              .show-lists__chat-main__message-lists__contents__content1__right
26                .show-lists__chat-main__message-lists__contents__content1__right__time-stamp
27                  = inform.created_at

javascript
1$(function(){
2  function buildHTML(message){
3    if (message.image) {
4      let html = `
5                    <div class="show-lists__chat-main__message-lists__contents__content">
6                      <div class="show-lists__chat-main__message-lists__contents__content__left">
7                        <div class="show-lists__chat-main__message-lists__contents__content__left__name">
8                          ${message.user_name}
9                        </div>
10                        <div class="show-lists__chat-main__message-lists__contents__content__left__text">
11                          ${message.content}
12                          <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}">
13                        </div>
14                      </div>
15                      <div class="show-lists__chat-main__message-lists__contents__content__right">
16                        <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
17                          ${message.created_at}
18                        </div>
19                      </div>
20                    </div>
21                  `
22      return html;
23    } else {
24      let html = `
25                      <div class="show-lists__chat-main__message-lists__contents__content">
26                        <div class="show-lists__chat-main__message-lists__contents__content__left">
27                          <div class="show-lists__chat-main__message-lists__contents__content__left__name">
28                            ${message.user_name}
29                          </div>
30                          <div class="show-lists__chat-main__message-lists__contents__content__left__text">
31                            ${message.content}
32                          </div>
33                        </div>
34                        <div class="show-lists__chat-main__message-lists__contents__content__right">
35                          <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
36                            ${message.created_at}
37                          </div>
38                        </div>
39                      </div>
40                  `
41      return html
42    }
43}
44  $(function(){
45    $('.chat-main__message-form__Form').on("submit", function(e){
46      
47      e.preventDefault();
48      let formData = new FormData(this);
49      console.log(formData)
50      let url = $(this).attr('action');
51
52      $.ajax({
53        url: url,  //同期通信でいう『パス』
54        type: 'POST',  //同期通信でいう『HTTPメソッド』
55        data: formData,  
56        dataType: 'json',
57        processData: false,
58        contentType: false
59      })
60
61    .done(function(data){
62      let html = buildHTML(data);
63      $('.show-lists__chat-main__message-lists__contents').append(html);
64      $('form')[0].reset();
65      $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight});
66      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
67    })
68    .fail(function() {
69      alert("メッセージ送信に失敗しました");
70      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
71  });
72  })
73
74})
75});

試したこと

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

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

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2

行動規範の内容に同意します

回答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 00:27

winterboum

総合スコア23567

tomoZQ

2020/07/19 07:55

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