javascript内での繰り返しの記述(rails使用)

前提・実現したいこと

railsでjQueryとajaxを用いた非同期通信を実装中です。
非同期のデータの受け渡しは成功し、最後にhtmlを構成し直すところで問題が発生しました。
javascriptのコードにtimesのような繰り返し処理を書くことはできないでしょうか。

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

gifを見てもらえればわかるのですが、セレクトボックスでイベントを発火させてその年に関連するレコードを表示するのですが、コードがそのまま出力されてしまいます。

該当のソースコード

haml
1.history_result
2  - @first_view.each do |rec|
3    .history_box.row
4      .history_list.col-12.d-flex
5        - 2.times do |number|
6          .history_list__category.col-md-4.text-center{class: "category#{number}"}
7            - case number
8            - when 0
9              = rec.donation_day
10            - when 1
11              = rec.inspection_method_i18n
12        .col-md-3
13          記録閲覧

javascriptのイベント発生等の記述は省略させていただきます。

javascript
1function appendList(record, result_area) {
2      var result =  `<div class='history_box row'>
3                      <div class='history_list col-12 d-flex'>
4                        <% 2.times do |number| %>
5                          <div class="category<%= number %> history_list__category col-md-4 text-center">
6                            <% case number %>
7                            <% when 0 %>
8                              <%= ${record.day} %>
9                            <% when 1 %>
10                              <%= ${record.method} %>
11                            <% end %>
12                          </div>
13                        <% end %>
14                        <div class='col-3'>記録閲覧</div>
15                      </div>
16                    </div>`;
17      result_area.append(result);
18    }

これがセレクトボックス変更後に表示させようとしているhtmlになります。
単純に元のhamlの記述をhtmlに直しただけになります。

2回分同じhtmlを記載するやり方も考えましたが、元のhtmlと同じようになるべく繰り返し処理で実現させたいと考えています。

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

rails(5.2.3)

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptの中にrailsの記法を入れても動きません。JavaScriptはブラウザ上で、railsはサーバ上で動くからです。
appendListをAjaxのコールバックで受け取ったデータを基に動かしているのであれば、データの処理もJavaScriptで書く必要があります。railsの記法が使いたいのであれば、railsで出力したHTMLをJavaScriptに渡して描画するように書き換えましょう。

投稿2019/12/01 13:18