jsファイルでのcreated_atのフォーマット

Question

前提・実現したいこと

Railsで作成しているタスク一覧画面でajaxによるタスク検索機能を実装したが、appendでの書き換え後、created_atを使用した箇所でフォーマットができないのでフォーマットしたい。

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

created_atをフォーマットしたい

表示させたい形
2020-09-16

現在の書き換え後の形
2020-09-16T09:00:00.000+09:00

該当のソースコード

index.html.erb

<tbody id="result">
                <tr>
                  <td>
                    <input id="search" type="form" name="title" class="w-100 h-100 ajax-filter ajax-filter-input">
                  </td>
                  <td>
                    <select class="w-100 h-100 ajax-filter ajax-filter-select" name="to_user_id" >
                      <option value selected>--</option>
                      <option value="#"></option>
                    </select>
                  </td>
                  <td>
                    <input type="form" value name="due_date" class="w-100 h-100 ajax-filter ajax-filter-input" >
                  </td>
                </tr>
                <% @tasks.each do |task| %>
                  <tr class="tasks_column-data">
                    <td>
                      <div class="td-border-div mytask-priority-5">
                        <%= link_to task.task_name, task_path(task.task_name) %>
                      </div>
                    </td>
                    <td>
                      <img src="#" class="plofile-icon ml-1 mr-1">
                      <span class="plofile-name-cover">sample name</span>
                    </td>
                    <td>
                      <div class="sub-project-name">
                        <%= l task.created_at %>に開始
                      </div>
                    </td>
                    <td class="text-nowrap">
                      <%= link_to edit_task_path(task), class: "btn btn-primary ajax-link tip" do %>
                        <i class="fa fa-fw fa-edit"></i>
                      <% end %>
                      <%= link_to task_path(task), method: :delete, data: { confirm: "削除してよいですか？ <br> <strong>#{task.task_name}</strong>", cancel: 'キャンセル', commit: '削除'}, title: '削除の確認', class: "btn btn-danger tip" do %>
                      <i class="fa fa-fw fa-trash"></i>
                      <% end %>
                      <a href="#" class="btn btn-primary ajax-link tip-right" data-title="記録">記録</a>
                    </td>
                  </tr>
                <% end %>
                </tbody>
              </table>

task.js

$(document).on('keyup', '#search', function(e){
  e.preventDefault();
  var input = $.trim($(this).val());
  console.log(input)
  $.ajax({
    url: '/tasks/search',
    type: 'GET',
    data: ('keyword=' + input),
    processData: false,
    contentType: false,
    dataType: 'json'
  })
  .done(function(data){
    $('tr.tasks_column-data').remove();
    $(data).each(function(index, task){
      console.log(task)
    $('#result').append(
        `<tr class="tasks_column-data">
          <td>
            <div class="td-border-div mytask-priority-5">
              <a href="/tasks/${task.task_name}" %>${task.task_name}</a>
            </div>
          </td>
          <td>
            <img src="#" class="plofile-icon ml-1 mr-1">
            <span class="plofile-name-cover">sample name</span>
          </td>
          <td>
            <div class="sub-project-name">
              <p>${ task.created_at }に開始</p>
            </div>
          </td>
          <td class="text-nowrap">
            <a class="btn btn-primary ajax-link tip" href="/tasks/${task}/edit">
              <i class="fa fa-fw fa-edit"></i>
            </a>
            <a data-confirm="削除してよいですか <br> <strong>${ task.task_name }</strong>" data-cancel="キャンセル" data-commit="削除" title="削除の確認"  class="btn btn-danger tip" rel="nofollow" data-method="delete"  href="/tasks/${ task.task_users_id}">
              <i class="fa fa-fw fa-trash"></i>
            </a>
            <a href="#" class="btn btn-primary ajax-link tip-right" data-title="記録">記録</a>
          </td>
        </tr>`
      )
    });
  })
});

index.json.jbuilder

json.array! @tasks do |task|
  json.task_name task.task_name
  json.task_users_id task.task_users_id
  json.created_at task.created_at
end

試したこと

・config/initializers/time_formats.rbを作成し、

Time::DATE_FORMATS[:default] = '%Y/%m/%d %H:%M'

Time::DATE_FORMATS[:datetime] = '%Y/%m/%d %H:%M'

Time::DATE_FORMATS[:date] = '%Y/%m/%d'

Time::DATE_FORMATS[:time] = '%H:%M:%S'

Date::DATE_FORMATS[:default] = '%Y/%m/%d'

を記載。

・jbuilderファイルに.strftime("%Y-%m-%d")を追記

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

Rails 5.2.4.2

Answer 1

created_atをフォーマットしたい

created_atがJSONデータ上Date型だから問題なのでしょ？

それだったら

  console.log(task)

で書かれているタイミングで文字列に変換しては？

task.created_at = task.created_at.getFullYear() + '-' + ('0' + (task.created_at.getMonth() + 1)).slice(-2) + '-' + ('0' + task.created_at.getDate()).slice(-2);

Answer 2

json形式で受け取った値を変更したいのであれば、jQuery側でフォーマットを変更すればいいのではないでしょうか？

Comments

[takuya861]

jQuery側でフォーマットする方法がわかりませんでした。
よければご教示いただけないでしょうか？

[no1knows]

シンプルに${ task.created_at }.slice(0,10)で期待通りの値になりそうな気がします！

[takuya861]

${ task.cfreated_at.slice(0,10) }で解決しました！！
ありがとうございました！

[no1knows]

あぁ、お恥ずかしい。
解決してよかったです！

[takuya861]

その知識があるのがすごいです！！
私ももっと知識を得るよう頑張ります。
ありがとうございました！