jQuery appendで取得したjsonデータをビューに表示させる為、jsファイル内でHaml→HTMLの書き換えを行う際の問題

Question

前提・実現したいこと

コメント機能の非同期通信化を実装中
jQueryの、json形式で取ってきたデータをビューのhamlにappendしたい
jsファイルからappendする時に、jsファイル内でappendしたい箇所のHamlをHTMLに書き換えたい。

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

if文を書き変えている所がどうしてもうまく行かずに
そのままif文の文章がそのままビューに表示される

該当のソースコード

以下、買い替え箇所のjsファイルのコードと
ビューファイルのhamlコード

.PostInfo__yourComments-wrapper
　= link_to (image_tag comment.user.image.url, class: "PostInfo__yourComments--image CommentUserShow-image"), user_path(comment.user)
　= link_to user_path(comment.user), class: "PostInfo__yourComments--name CommentUserShow-name" do
　　= comment.user.name
　.PostInfo__yourComments--contents
　　- if current_user.id == comment.user.id
　　　%span.OwnComment
　　　　= comment.content
　　- else
　　　%span
　　　　= comment.content

function buildHTML(comment){
    let html =
      `<div class="PostInfo__yourComments-wrapper">
        <a href="/users/${comment.user_id}"><img src="${comment.image}" class="PostInfo__yourComments--image CommentUserShow-image"></a>
        <a class="PostInfo__yourComments--name CommentUserShow-name", href="/users/${comment.user_id}">${comment.user_name}</a>
        <div class="PostInfo__yourComments--contents">
          if (current_user.id === ${comment.user_id}) {
            <span class="OwnComment">${comment.content}</span>
          } else {
            <span>${comment.content}</span>
          }
        </div>
      </div>`
    return html
  }

試したこと

if分の文章がそのまま表示されているということは、条件式の書き方の問題ではないと予想。
<%%>を前後に付けてみてもダメでした。

Answer 1

文字列として連結すればよいのでは。

    let html =
      `<div class="PostInfo__yourComments-wrapper">
        <a href="/users/${comment.user_id}"><img src="${comment.image}" class="PostInfo__yourComments--image CommentUserShow-image"></a>
        <a class="PostInfo__yourComments--name CommentUserShow-name", href="/users/${comment.user_id}">${comment.user_name}</a>
        <div class="PostInfo__yourComments--contents">`;
    if (current_user.id === ${comment.user_id}) {
        html += `<span class="OwnComment">${comment.content}</span>`;
    } else {
        html += `<span>${comment.content}</span>`;
    }
    html += `</div>
      </div>`;

Comments

[mako19]

if文の条件式の中の${comment.user_id}がおそらく原因？で（${}がここだけ色付けされていないので）
ActionController::UnknownFormat in CommentsController#create　のエラー文が表示されています。

そして${}取ったらもう一度実行してみると、処理が止まったのか、無限ループなのか、
何も動かない状態になっています。パソコンの音は聞こえないので無限ループではないかと思われます。

[kei344]

if (current_user.id === comment.user_id) {
こうですね、失礼しました。
「ActionController::UnknownFormat in CommentsController#create」はJavaScriptのエラーではないので、ちょっとわかりません。

[mako19]

いえいえ、回答ありがとうございました！
自分でも少し模索してみます