javascriptでのループ処理

erbファイルの<script>タグ内でループ処理行いたいです。
ループの内容はgooglemapAPIのマーカーを各postが持つ位置情報毎に作成するというものです。

例えばループ対象が

@posts = Post.all

である場合あった場合、

➀scriptタグ内にrubyのループ書く

<script>
<% @posts.each do |post| %>
   var markerOptions = {
   　　position:{lat: <%= post.latitude %>, lng: <%= post.longitude %>},
      map: map
   };
   var marker = new google.maps.Marker(markerOptions);
<% end %>
</script>

➁@postsをjsonにしてjsのループを書く

<input name="posts" type="hidden" value=<%= @posts_to_j %> class='posts'/>
<script>
    var posts = $('.posts').val();
    var posts_json = JSON.parse(posts);

    posts_json.map(post => {
                  const marker = new google.maps.Marker({
                  position: {lat: post.latitude, lng: post.longitude},
                  map: map
                  });
</script>

の２パターンでの実装を考えました
試してみたところ両方とも意図した動作をするのですが、
どちらを選択するのがベターなのか判断がつかないのでアドバイスを頂きたいです。
jsにはjsでのみの記述した方がいいのでしょうか？
よろしくお願いいたします。

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

回答3件

ベストアンサー

<%= @posts_to_j %>

JSONに出来るなら話は早いですね。

JSONはJavaScript Object Notationの略称ですので、
このようにベタッとJSコードとして貼り付けるだけで動作するんじゃないですか？

js
1var posts = <%= @posts_to_j %>;

投稿2020/02/07 03:23

miyabi-sun

総合スコア21203

final_mikan

2020/02/10 14:59

遅くなり大変失礼しました、いただいた回答通りにJSONを渡してスッキリ書くことができました！ JSONについて適当な理解で使ってしまっていたので勉強するきっかけにもなりました、ありがとうございます！

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

どちらを選択するのがベターなのか判断がつかない

２択であれば、postsをjsonにしてjsのループを書くという2番目の方を使います。
他の方法でも構わないのであれば、miyabi-sun さんの回答を採用します。

理由:
javascript はフレームワークが応答する HTMLに埋め込まれた形になるはずです。

JSON が配列データとして素直にJavascript変数に代入する形で現れる。
マーカー作成処理と分離されている。

ブラウザでHTMLソースを見たときにデバッグしやすそう。

投稿2020/02/09 12:21

AkitoshiManabe

総合スコア5434

final_mikan

2020/02/10 15:04

結果的にはmiyabi-sunさんのアドバイスを元に書き換えましたが、なぜそうするかの理由まで解説していただけて初学者には本当に助かりました。ありがとうございます！

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

➀scriptタグ内にrubyのループ書く

これを展開すると、以下のようになります。

javascript
1   var markerOptions = {
2   　　position:{lat: <%= post.latitude %>, lng: <%= post.longitude %>},
3      map: map
4   };
5   var marker = new google.maps.Marker(markerOptions);
6   var markerOptions = {
7   　　position:{lat: <%= post.latitude %>, lng: <%= post.longitude %>},
8      map: map
9   };
10   var marker = new google.maps.Marker(markerOptions);
11   var markerOptions = {
12   　　position:{lat: <%= post.latitude %>, lng: <%= post.longitude %>},
13      map: map
14   };
15   var marker = new google.maps.Marker(markerOptions);