コメント機能の非同期通信を実装する

Question

前提・実現したいこと

コメント送信時の非同期通信機能の実装をしているのですが、
リロードしないと送信されない。

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

ターミナルのエラー状態

Started POST "/books/14/comments" for ::1 at 2020-04-17 13:16:47 +0900
Processing by CommentsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"qXJp6E1vVSi7Nq2L3+Eo27E9trHY8ON6OSMTLh/o7erHqzBFhuZ3ZvPzHcmYY8iaHOkHHNV4Jn2oOo/J1VpiHA==", "comment"=>{"text"=>"tttttttttttt"}, "book_id"=>"14"}
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 6 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/comments_controller.rb:12
   (0.2ms)  BEGIN
  ↳ app/controllers/comments_controller.rb:3
  Book Load (0.2ms)  SELECT  `books`.* FROM `books` WHERE `books`.`id` = 14 LIMIT 1
  ↳ app/controllers/comments_controller.rb:3
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 6 LIMIT 1
  ↳ app/controllers/comments_controller.rb:3
  Comment Create (0.3ms)  INSERT INTO `comments` (`user_id`, `book_id`, `text`, `created_at`, `updated_at`) VALUES (6, 14, 'tttttttttttt', '2020-04-17 04:16:47', '2020-04-17 04:16:47')
  ↳ app/controllers/comments_controller.rb:3
   (0.5ms)  COMMIT
  ↳ app/controllers/comments_controller.rb:3
  Rendering comments/create.json.jbuilder
  Rendered comments/create.json.jbuilder (2.1ms)
Completed 500 Internal Server Error in 19ms (ActiveRecord: 1.7ms)


  
ActionView::Template::Error (undefined method `id' for nil:NilClass):
    1: json.text  @comment.text
    2: json.user.id  @comment.user.id
    3: json.user.name  @comment.user.name
    4: json.user.image  @comment.user.image
  
app/views/comments/create.json.jbuilder:2:in `_app_views_comments_create_json_jbuilder__2318686355230059086_70163845969960'

該当のソースコード

comment.js

$(function(){
  function buildHTML(comment){
    var html = `<div class="comments__a">
                  <div class="comments__img">
                    <img class="img" src="/${comment.user.image}">
                  </div>
                  <div class="comments__content">
                    <strong>
                      <a href="/users/${comment.user.id}">
                        ${comment.user.name}
                      </a>
                    </strong>
                    <h3>
                      ${comment.text}
                    </h3>
                  </div>
                </div>`
    return html;
  }
  $('#new_comment').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(comment){
      var html = buildHTML(comment);
      $('.comments').append(html);
      $('.textbox').val('');
      $('#form__submit__comment').prop('disabled', false);
    })
  })
});

html

 <div class="comments">
    <h4>コメント一覧</h4>
    <% if @comments %>
      <% @comments.each do |comment| %>
        <div class="comments__a">
          <div class="comments__img">
            <img class = "img" src="<%= comment.user.image %>">
          </div>
          <div class="comments__content">
            <strong><%= link_to comment.user.name, "/users/#{comment.user_id}" %></strong>
            <h3><%= comment.text %></h3>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>

  <div class="comments">
    <h4>いいねしているユーザー</h4>
      <% @book.likes.each do |like| %>    
        <img class = "img inline__img" src="<%= like.user.image %>">
      <% end %>
  </div>
</div>

comment.controller.rb

class CommentsController < ApplicationController
  def create
    @comment = Comment.create(comment_params)
    respond_to do |format|
      format.html { redirect_to "/books/#{@comment.book.id}" }
      format.json 
    end
  end

  private
  def comment_params
    params.require(:comment).permit(:text).merge(user_id: current_user.id, book_id: params[:book_id])
  end
end

create.json.jbuilder

json.text  @comment.text
json.user.id  @comment.user.id
json.user.name  @comment.user.name
json.user.image  @comment.user.image

routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: 'books#index'
  resources :users, only: [:index, :show, :edit]
  resources :books do
    resources :likes, only: [:create, :destroy]
    resources :comments, only: :create
    collection do
      get 'search'
    end
  end
end

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Answer 1

リロードしないと送信されない

が良く分かりませんが、エラーを見るに
・モデルにuserがbelongs_toされていない
・jbuilderが記述がおかしい
の2点考えられますがどうでしょう。

jbuilderの記述について、
あまり使ったことが無いので分かりませんが、以下のような感じにしたらどうでしょう。

json.text  @comment.text
json.user_id  @comment.user.id
json.user_name  @comment.user.name
json.user_image  @comment.user.image

Comments

[doraemon_love]

jbuilderの修正でうまくいきました！
ありがとうございます！