railsでチャットアプリを作っているのですが非同期通信のところでつまづいています。

$(function() {
  function buildHTML(message) {
    var html = `<div class="message"><div class="name">${message.name}</div><div class="data">${message.date}</div><div class="content">${message.content}</div></div>`
    return html;
  }
  $('#new_message').on('submit', function(e) {
     e.preventDefault();
     console.log(this)
     var formData = new FormData(this);
     console.log(formData)
     var url = $(this).attr('action')
     $.ajax({
      type: "POST",
      url: url,
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
     })
     .done(function(data) {
       var html = buildHTML(data)
       $('.messages').append(html)
       $('.content').val('')
     })
     .fail(function() {
      alert('メッセージの送信に失敗しました')
    })
  });
});

これがjsファイルです。

json.content @message.content
json.image @message.image
json.name @message.user.name
json.date  @message.created_at

これがjbuilderファイルです。

.message
 .name
  = message.user.name
 .data
  = message.created_at.strftime("%Y/%m/%d/%H/%M")
 .content
  - if message.content.present?
   = message.content
  = image_tag message.image.url if message.image.present?

これがメッセージ部分のhamlです。

メッセージを投稿するとコメント部分は非同期通信できるのですが名前と作成時間の部分がundefinedになってしまします。
どうすれば解決できるでしょうか？
ちなみにアソーシエーションはちゃんと組まれていました。!