【Ajax通信】コントローラー側でのJson形式データの処理について

Question

Ajax通信関連での質問です。

ユーザーが投稿したものに対してコメントをつけられるような機能を非同期通信で実装していまして、
一点分からない点があります。

下のコードにてコメントが送信されたときにそのフォームの情報をコントローラーに送信しています。

  $('#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(data){
      console.log(data);

そしてコントローラー側ではコメントを保存した後、コメント情報をjson形式でJavaScript側に返す処理を書いています。

  def create
    @comment = Comment.new(comment_params)
    @comment.user_id = current_user.id
    @comment.set_list_id = params[:set_list_id]
    respond_to do |format|
      if @comment.save
        format.html { redirect_to :back }
        format.json { render json: @comment}
      end
    end
  end

そして、返ってきている情報をconsole.logで確認すると、

{id: 38, content: "いきてー", user_id: 1, set_list_id: 1, created_at: "2020-05-24T22:11:02.000Z", …}

というデータでした。
Json形式のデータであればキーがダブルクオーテーションで囲うはずだと思うのですが、ハッシュとして返ってきているのはなぜなのでしょうか？？

また、この返ってきているdataの中身を確認すると、

console.log(data.content)　　　　　#いきてー
console.log(data.user.name)      #error

となり、data.user.nameは値を取得できませんでした。
このようになった理由が知りたいです。

何卒、よろしくお願いします。

Answer 1

Json形式のデータであればキーがダブルクオーテーションで囲うはずだと思うのですが、ハッシュとして返ってきているのはなぜなのでしょうか？？

$.ajaxがJSONを解釈してオブジェクトに戻しています。

data.user.nameは値を取得できませんでした。

JSONを生成する時点で、include: :userなどとして一緒に詰め込んでおく必要があります。

Comments

[shun0211]

オブジェクトに戻しているから、値が取得できなかった訳ですね。
繋がりました！素早い回答ありがとうございました！