Railsの自動更新機能ができない

前提・実現したいこと

railsでグループが作成でき、その中でチャットができるアプリを開発しています。
チャットの自動更新機能でエラーが出てしまっています。
グループ(Gossip)の中でチャット（chat）ができるように実装しています。
Gossip, Chatというテーブルがあり
GossipをクリックすることでそのゴシップのChat#indexに飛び、チャットの一覧を閲覧できます。
Chat#indexのビューファイル内にChat#newへのリンクがあり、Chat#newのビューへリンクします。
Chat#newにはチャットの一覧表示部分、チャット入力部分があり、このページで非同期通信、自動更新を実装しています。
非同期通信での投稿はできています。

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

コンソールにもターミナルにもエラーが出ていないように見えますが、autoReload.jsのdoneの処理にデータが入りません。

Started GET "/gossips/4/chats/new?id=56" for ::1 at 2020-09-23 20:17:42 +0900
Processing by ChatsController#new as JSON
  Parameters: {"id"=>"56", "gossip_id"=>"4"}
  User Load (0.5ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  Gossip Load (0.4ms)  SELECT `gossips`.* FROM `gossips` WHERE `gossips`.`id` = 4 LIMIT 1
  ↳ app/controllers/chats_controller.rb:35:in `set_gossip'
  Rendering chats/new.html.haml within layouts/application
  Chat Load (0.6ms)  SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 4
  ↳ app/views/chats/new.html.haml:12
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1
  ↳ app/views/chats/new.html.haml:12
  Rendered chats/new.html.haml within layouts/application (Duration: 17.9ms | Allocations: 10829)
Completed 200 OK in 40ms (Views: 33.4ms | ActiveRecord: 1.9ms | Allocations: 34969)

該当のソースコード

ruby
1#routes.rb
2Rails.application.routes.draw do
3  devise_for :users
4  root to: 'home#top'
5  get 'about', to:'home#about'
6  resources :users, only: [:show, :update, :edit]
7  resources :gossips, only: [:new, :create, :index] do
8    resources :chats, only: [:index, :create, :new] 
9    namespace :api do
10      resources :chats, only: :new, defaults: { format: 'json' }
11    end
12  end
13
14  resources :movies do
15    resources :comments, only: :create
16  end
17  get 'searchs', to: 'searchs#map'
18end

ruby
1#chats_controller.rb
2class Api::ChatsController < ApplicationController
3  before_action :set_gossip
4
5  def new
6    # ルーティングでの設定によりparamsの中にgroup_idというキーでグループのidが入るので、これを元にDBからグループを取得する
7    gossip = Gossip.find(params[:gossip_id])
8    # ajaxで送られてくる最後のメッセージのid番号を変数に代入
9    last_chat_id = params[:id].to_i
10    # 取得したグループでのメッセージ達から、idがlast_message_idよりも新しい(大きい)メッセージ達のみを取得
11    @chats = @gossip.chats.includes(:user).where("id > ?", last_chat_id)
12  end
13
14end

haml
1= javascript_include_tag 'autoReload'
2.chat_new
3  .chat_new__title
4    = @gossip.name
5    .chat_new__title__links
6      =link_to root_path do
7        Home
8      = link_to gossip_chats_path(@gossip.id) do
9        Chat一覧
10  .chat_new__wrapper
11    .chat_new__wrapper__chatsIndex
12      - @chats.each do |chat|
13        .chat{data: {chat: {id: chat.id}}}
14          .chat__in
15            .chat__in__left
16              .chat__in__left__userIcon
17                = image_tag src= "#{chat.user.image}"
18            .chat__in__right
19              .chat__in__right__top
20                .chat__in__right__top__userName
21                  = chat.user.name
22                .chat__in__right__top__createdTime
23                  = chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
24              .chat__in__right__bottom
25                .chat__in__right__bottom__content
26                  = chat.content
27                  = image_tag chat.image.url, class: 'Message__image' if chat.image.present?
28    .chat_new__wrapper__contents
29      %p
30        メッセージ作成
31      .chat_new__wrapper__contents__user
32        %p
33          %span 
34            作成者
35          = current_user.name
36      .chat_new__wrapper__contents__form
37        = form_with model: [@gossip, @chat], html: {class: "Form"}, local: true do |f|
38          .formContents
39            = f.text_area :content, class: 'Form__inputContent', placeholder: 'type a message'
40            = f.label :image, class: 'Form__inputImage' do
41              = icon('far', 'image', class: 'Form__icon')
42              = f.file_field :image, class: 'Hidden'
43          .formBtn
44            = f.submit 'Chat', class: 'Form__submit'
45            = icon('fas', 'hand-point-left')
46

javascript
1$(function(){
2  function buildHTML(chat){
3    if ( chat.image ) {
4      let html =
5      `
6        <div class="chat" data-chat-id=${chat.id}>
7          <div class="chat__in">
8            <div class="chat__in__left">
9              <div class="chat__in__left__userIcon">
10              <img src="${chat.user_image_url}">
11              </div>
12            </div>
13            <div class="chat__in__right">
14              <div class="chat__in__right__top">
15                <div class="chat__in__right__top__userName">
16                  ${chat.user_name}
17                </div>
18                <div class="chat__in__right__top__createdTime">
19                  ${chat.created_at}
20                </div>
21              </div>
22              <div class="chat__in__right__bottom">
23                <div class="chat__in__right__bottom__content">
24                  ${chat.content}
25                  <img class="Message__image" src="${chat.image}">
26                </div>
27              </div>
28            </div>
29          </div>
30        </div>
31      `
32      return html;
33    } else {
34      let html =
35    `
36      <div class="chat" data-chat-id=${chat.id}>
37        <div class="chat__in">
38          <div class="chat__in__left">
39            <div class="chat__in__left__userIcon">
40              <img src="${chat.user_image_url}">
41            </div>
42          </div>
43          <div class="chat__in__right">
44            <div class="chat__in__right__top">
45              <div class="chat__in__right__top__userName">
46                ${chat.user_name}
47              </div>
48              <div class="chat__in__right__top__createdTime">
49                ${chat.created_at}
50              </div>
51            </div>
52            <div class="chat__in__right__bottom">
53              <div class="chat__in__right__bottom__content">
54                ${chat.content}
55              </div>
56            </div>
57          </div>
58        </div>
59      </div>
60    `
61      return html;
62    };
63  }
64  let reloadChats = function() {
65    //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
66    let last_chat_id = $('.chat:last').data("chat-id") || 0;
67    $.ajax({
68      //ルーティングで設定した通り/groups/id番号/api/messagesとなるよう文字列を書く
69      url: location.href,
70      //ルーティングで設定した通りhttpメソッドをgetに指定
71      type: 'get',
72      dataType: 'json',
73      //dataオプションでリクエストに値を含める
74      data: {id: last_chat_id}
75    })
76    .done(function(chats) {
77      // 更新するメッセージがなかった場合は.doneの後の処理が動かないようにする
78      if (chats.length !== 0) {
79        //追加するHTMLの入れ物を作る
80        let insertHTML = '';
81        //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
82        $.each(chats, function(i, chat) {
83          insertHTML += buildHTML(chat)
84        });
85        //メッセージが入ったHTMLに、入れ物ごと追加
86        $('.chat_new__wrapper__chatsIndex').append(insertHTML);
87        $('.chat_new__wrapper__chatsIndex').animate({ scrollTop: $('.chat_new__wrapper__chatsIndex')[0].scrollHeight});
88      }
89    })
90    .fail(function() {
91      
92      console.log('Error');
93    });
94  };
95  setInterval(reloadChats, 7000);
96});

ruby
1#new.json.jbuilder
2json.array! @chats do |chat|
3  json.user_name chat.user.name
4  json.created_at chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
5  json.content chat.content
6  json.image chat.image_url
7  json.user_id chat.user.id
8  json.user_image_url chat.user.image_url
9  json.id chat.id
10end