ActionController::RoutingError (No route matches [GET] "/groups/41/[object"):教えてください。。。

Question

railsでajaxを用いて自動更新を実装しようとしていましてなんとかローカルサーバーで無事繋がり自動更新自体はされているのですが、データがうまく送れていないのかこの「ActionController::RoutingError (No route matches [GET] "/groups/41/[object"):」
が出てしまいます。どこを修正もしくは加えたら直りますか。

class Api::MessagesController < ApplicationController
  def index
    group = Group.find(params[:group_id])
    last_message_id = params[:id].to_i
    @messages = group.messages.includes(:user).where("id > #{last_message_id}")
  end
end

$(function() {
  
  function buildHTML(message) {
    var image = message.image? `<img src= ${ message.image }>` : "";
    var html = `<div class="message" data-message="${message.id}">
                  <div class="upper-message">
                    <div class="upper-message__user-name">
                      ${message.user_name}
                    </div>
                    <div class="upper-message__date">
                      ${message.date}
                    </div>
                  </div>
                  <div class="lower-message">
                    <p class="lower-message__content">
                      ${message.content}
                    </p>
                    ${image}
                </div>`
    return html;
  }
  $('#new_message').on ('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')

    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })

    .done(function(data) {
      var html = buildHTML(data);
      $('.messages').append(html);
      $('#new_message')[0].reset();
      $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
    })

    .fail(function(data) {
      alert('メッセージを入力してください')
    })

    .always(function(data) {
      $('.form__submit').prop('disabled', false);
    })
  });
  
  var reloadMessages = function() {
    if (window.location.href.match(//groups/\d+/messages/)){
      var last_message_id = $('.message:last').data("message-id")
      $.ajax({
        url: 'api/messages',
        type: 'get',
        dataType: 'json',
        data: {id: last_message_id}
      })
      .done(function(messages) {
        var insertHTML = '';
        messages.forEach(function(message){
          insertHTML = buildHTML(message);
          $('.messages').append(insertHTML);
          $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
        })
      })
       .fail(function() {
        alert('自動更新に失敗しました！');
      });
    }
  };
  setInterval(reloadMessages, 5000);
});

json.array! @messages do |message|
  json.content    message.content
  json.image      message.image
  json.created_at message.created_at
  json.user_name  message.user.name
  json.id         message.id
end

.message{"data-message-id": "#{message.id}"}
  .upper-message
    .upper-message__user-name
      = message.user.name
    .upper-message__date
      = message.created_at.strftime("%Y/%m/%d %H:%M")
  .lower-message
    - if message.content.present?
      .lower-message__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?

Rails.application.routes.draw do
  devise_for :users
  root 'groups#index'
  resources :users, only: [:index,:edit, :update]
  resources :groups, only: [:new, :create, :edit, :update] do
    resources :messages, only: [:index, :create]
    namespace :api do
      resources :messages, only: :index, defaults: { format: 'json' }
    end
  end
end

追記

[1]こちらのコードを突っつかれますと、、

.message{"data-message-id": "#{message.id}"}

[2]同じgroup.idの場合のみここの処理がされ、、、

var reloadMessages = function() {
    if (window.location.href.match(//groups/\d+/messages/)){
      var last_message_id = $('.message:last').data("message-id")
      $.ajax({
        url: 'api/messages',
        type: 'get',
        dataType: 'json',
        data: {id: last_message_id}
      })
      .done(function(messages) {
        var insertHTML = '';
        messages.forEach(function(message){
          insertHTML = buildHTML(message);
          $('.messages').append(insertHTML);
          $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
        })
      })
       .fail(function() {
        alert('自動更新に失敗しました！');
      });
    }
  };
  setInterval(reloadMessages, 5000);
});

[3]このapi/index.controller.rbが始まります。

class Api::MessagesController < ApplicationController
  def index
    group = Group.find(params[:group_id])
    last_message_id = params[:id].to_i
    @messages = group.messages.includes(:user).where("id > #{last_message_id}")
  end
end

[#]こちらがconfig/routes.rbになります。

Rails.application.routes.draw do
  devise_for :users
  root 'groups#index'
  resources :users, only: [:index,:edit, :update]
  resources :groups, only: [:new, :create, :edit, :update] do
    resources :messages, only: [:index, :create]
    namespace :api do
      resources :messages, only: :index, defaults: { format: 'json' }
    end
  end
end

Comments

[winterboum]

読み解くのもこの暑さ辛いので、
1) haml のどの要素を突っつくと、
2) どのfunctionが呼ばれ
3) controllerのどれに送るつもりなのか
と
config/routes.rb
を
教えて下さい。
# コメントでなく、質問本文に追記で

[退会済みユーザー]

追記をいたしました。
わかりづらいままの投稿にも関わらずありがとうございます。
自分なりに情報は絞ったつもりなのですが、聞かれていることマッチしてない可能性もあるかもしれませんがよろしくお願いします。

Answer 1

きちんと読んでいませんが、気になる所がいくつかあります
1)エラーメッセージの No route matches [GET] "/groups/41/[object"
の、最後 "[object"。　ここはactionが入るところなので、そこがおかしい。この部分のURLの作り方を間違えているのでは、と　どのfunctionが呼ばれているのかを確認しました。
JSは苦手なので読みそこねているかもですが、この　$.ajax({}) で　"/groups/41/[object"　となるのがはて。この [object というのは JSが期待している値を返しておらず object 某というのを返しそれが出て来ているのでは？と思いました。$.ajax({}) が使う変数の値をalertなどで確認してみて下さい。

2)url: 'api/messages'　で呼んでいるのに /groups/41/　が無いと言っている。本当にそのfunctionが反応していますか？

3)　/api/messages のindexからこのfunctionが呼ばれる　で合ってます？
すると url "api/messages" は /api/messages/api/messages を呼びませんか？

4)このroutes.rb で　/api/messages を呼ぶroutesができます？
rails routs で確かめて下さい

Comments

[退会済みユーザー]

お返事遅くなりすみません。
[2]に関しては今一度確認してみたら何かおかしいと思いました。
[4]に関しましてはしっかり呼び出せるように設定してあります。

もらったお返事をもとに調べながらやってみようと思います。
お忙し中ありがとうございました！