JSで非同期をする際のevalの記述の仕方

Question

現在、非同期通信の実装をしており、投稿した内容がリロードなしで反映されるようにしています。
（画像左側の）参考書やサイトを見ながら実装を試みているのですが、（画像右側の）私のコードの
21行目に書いてあるコードをjsのコードルールに乗っ取りながらコーディングしようと思っています。
ですが、eval関数を使用しているため、どのように記述するのが正しいのかイマイチ分かりません。

もともとのhtmlファイルの記述が

 <%= eval("expense.name_#{i + 1}") %>
 <%= eval("expense.price_#{i + 1}") %>

です。

現在、コーディング中ですが、

${eval${item.name_i)}
${eval${expense.price_i}}  

で、コーディングしていますが、これでよろしいでしょうか？
アドバイスやご指摘お願いしたいです。よろしくお願いします！

Comments

[maisumakun]

「もともとのhtmlファイルの記述」は、どのような処理系で処理させることを前提としたものでしょうか？

[Hiromu94]

コメントありがとうございます。

家計簿アプリを作っており、htmlには、家計簿の商品名（name）と値段(price)をformでコーディング、submitボタンで登録。それをeachメソッドで表示させる処理をしています。

https://gyazo.com/676c0fec2ec31700038bf946a33a28ea

画像のurlを貼りました。
左部分は、家計簿アプリの画面です。真ん中にある登録した家計簿を非同期で表示させたいです。

[maisumakun]

evalで処理される対象がJavaScriptの書式ではなさそうですが、どのように処理していますか？

[Hiromu94]

お返事ありがとうございます。
先ほどの画像のコードは、html.erbのファイルです。

それを、jsのファイルに書こうと思っていましたがどのように書いたら良いか分からず、手詰まり状態というところです。。。

Answer 1

先ほどの画像のコードは、html.erbのファイルです。

それを、jsのファイルに書こうと思っていましたが

サーバサイドからクライアントサイドに移行するに当たっては、ブラウザへ必要な値が伝わっているかがまず問題です。そっちを先に確認してください。

なお、プロパティ名が変わる参照の場合、JavaScriptではexpense['price_' +i]のように角カッコを使えば、動的な名前で参照できます。

Comments

[Hiromu94]

ありがとうございます！
先にそちらを確認してみます！

また、プロパティ名が変わる参照の場合の書き方も教えていただきありがとうござます！