質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

462閲覧

javascriptの繰り返し処理

t.togashi

総合スコア22

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/09/17 12:41

前提・実現したいこと

ruby on railsのアプリにおいて、Google Maps APIを使用し、マップと、マップ上に複数のマーカー表示しています。
マップ上のマーカーをクリックすると、それぞれのマーカーに該当するshow.html.slimページにリンクする仕様にしたいと考えています。

発生している問題

問題箇所

// マーカーのクリックイベント marker.addListener('click', function(){ console.log(damages); console.log(damages[i]); });

リンクする仕様を実装する前段階で、クリックイベント内の挙動を確認しながら進めているのですが、
console.log(damages);の出力は、意図したarray(その中にハッシュ)であるものの、
console.log(damages[i]);の出力は、undefinedとなります。
すなわち、この部分の繰り返し処理がうまくできていないと認識しているのですが、この書き方でなぜ上手くいかないのかがわかりませんでした。
どのように改善すべきかご教示頂けますと幸いです。

該当のソースコード

index.html.slim

.page-title 被害一覧 = link_to '被害の新規登録', new_damage_path, class: 'btn btn-primary' table.table.table-hover.index-table thead.thead-light tr th = Damage.human_attribute_name(:title) th = Damage.human_attribute_name(:place) th = Damage.human_attribute_name(:amount) th = User.human_attribute_name(:department) th = User.human_attribute_name(:name) th tbody - @damages.each do |damage| tr td = link_to damage.title, damage_path(damage), class: 'damage-title' td = damage.place td = damage.amount&.to_s(:delimited) td = damage.user.department td = damage.user.name - if damage.user_id == current_user.id td = link_to '編集', edit_damage_path(damage), class: 'btn btn-primary' - else td = tr td = "合計" td = "#{@total_place}箇所" td = @total_amount.to_s(:delimited) td = td = td = #map.mb-5 javascript: // APIライブラリの読み込みが終わったら実行する関数を指定 function initMap() { // javascriptうちでは - @damages.each do |damage| という方法は使用不可のため、JSONに変換 var damages = #{raw @damages.to_json}; // idがmapのdiv要素オブジェクトを取得 var target = document.getElementById('map'); // 中央に表示する座標 var center = {lat: 38.698953,lng: 139.925736} // マップを描画 map = new google.maps.Map( // 描画する領域のオブジェクトを指定 target, { // 描画に関するオプション center: center, zoom: 13 }); var marker, i; for (i = 0; i < damages.length; i++) { // マーカーを表示 marker = new google.maps.Marker({ // 表示オプション position: new google.maps.LatLng(damages[i].latitude, damages[i].longitude), map: map, title: damages[i].title, icon: ( damages[i].description.indexOf('現地確認未了') == -1 ) ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/blue-dot.png" }); // マーカーのクリックイベント marker.addListener('click', function(){ console.log(damages); console.log(damages[i]); }); } } script async="" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw&callback=initMap"

参考にした情報

http://www.webdesignleaves.com/pr/plugins/googlemap_01.html

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

for (i = 0; i < damages.length; i++)

for (let i = 0; i < damages.length; i++)

これが一番簡単だと思います。

投稿2019/09/17 12:45

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t.togashi

2019/09/17 13:27

ありがとうございました。 こんなに早く解決していただけて助かりました。 恐れ入りますが、補足で教えていただきたいです。 `let`を加えることにより、{ ~ } がスコープとなったために、当初の問題箇所においても`[i]`を使用できるようになったという理解で間違い無いでしょうか。
kei344

2019/09/17 13:35

はい。
t.togashi

2019/09/17 13:38

ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問