jQueryで{{Form::select}}を生成したいが、エスケープされ文字列になってしまう

Question

前提・実現したいこと

$dataの値をjqueryで{{Form::select}}にセットし、viewに反映させたい

{{ Form::select('name', $data, null, ['class' => 'class', 'multiple' => 'multiple']) }}

他のフォームからの制御で値が変わるセレクトボックスで、$dataはajax通信で
Controllerから受け取った変数が入ります。

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

laravelcollective Form::selectを動的に生成したく
jQeryのappend()を用いて実装しようとしましたが、文字列として出力されてしまいます。

該当のソースコード

//foo.js
html = "{{ Form::select('name', " + data + ", null, ['class' => 'class', 'multiple' => 'multiple']) }}";
$('#selector').append(html);

//hoge.blade
"{{ Form::select('name', [object Object], null, ['class' => 'class', 'multiple' => 'multiple']) }}"

試したこと

$dataをeachで回してセレクトボックスの中身を一行ずつ出力する方法も検討しました。
が、つくりが少々複雑でこのやり方をすると他のフォームに作業が波及してしまう事情があり
{{Form::select}}をまるごと出力した方が間違いがなさそう・・・がうまいやり方が思いつかないという具合です。

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

Laravel8　laravelcollective

よろしければお知恵をお貸しください。

Comments

[m.ts10806]

そのjQueryのコードってblade内に書かれてるのでしょうか

[balut0]

いいえ、別のjsファイルに記載しております。

[m.ts10806]

ん、blade通さないとhtmlの要素には変換されないはずで。

[balut0]

ご指摘ありがとうございます。
他の方からのご指摘も拝見して、やり方どうこうの前に間違っている箇所が多そうですね。
方法から検討しなおしてみます、ありがとうございます。

Answer 1

AjaxでHTMLまるごと返すべきと思います。完全外部jsファイル（非blade）では変数展開されません（Laravel配下ではないのでPHPによる置換がない）

なお、おそらくHTMLまるごと返すにしてもLaravelのコントローラを介してbladeで生成したHTMLを返すことになるので、「エスケープせずに」という問題はついてきそうに思います。
エスケープしない出力の仕方はマニュアルにも言及されています。
Displaying Unescaped Data

Comments

[balut0]

ご回答ありがとうございます。
jsで変数を含むhtmlをどうこうという発想が無理があったんですね。
おっしゃる方法が私の問いに対する正解とは思うのですが
html丸ごととなると別の課題があり、そのままの実装が難しい状態なので
いただいたご回答踏まえつつ方法を検討したいと思います、ありがとうございます。

[m.ts10806]

>jsで変数を含むhtmlをどうこうという発想が無理があったんですね。

いえ。生のjsファイルにPHPは書けないということです。

Answer 2

apiからajaxでうけとった文字列なんですよね？
文字列なら評価してDOM（的なもの）をつくってappendする必要があるでしょう
なおdataが文字列ではないなら+で連結するのは無理があると思います
そもそもAPIが$dataを埋め込んで返してくれる想定ですよね？
jQueryでdataを評価するのはおかしいのでは？
また、このケースだとAPIが直接HTMLを返してもらうのが一番ラクだと思います

Comments

[balut0]

ご回答ありがとうございます。
ご指摘いただいた部分はたしかにおかしいですね、他にも間違っている箇所が多そうです。
ご提示いただいた方法も含めてやり方から検討しなおします、ありがとうございました。