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

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

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

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

Q&A

解決済

3回答

4145閲覧

JSONファイルの中身をテーブルで表示したい

shinoda

総合スコア75

JavaScript

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

0グッド

1クリップ

投稿2015/10/13 06:20

編集2015/10/15 08:58

お世話になります。

現在jsonファイルのデータをグーグルマップに表示して、さらにマップに表示されている情報の一覧をテーブルで表示したいのですがうまくいかず困っています。

テーブルに表示したい物は、マップの吹き出しと同じような感じで「画像」「所在置」「店舗名」を想定しています。

ご教授いただければ幸いです。

以下に作成中のコードを示します

javascript

1 2var openInfoWindow = null; 3 4$(function initialize() { 5 var data = new Array(); 6 $.getJSON("json/array.json" , function(data) { 7 for( var i in data){ 8 for( var j in data[i] ){ 9 if(data[i]["C"] == 1){ // 表示・非表示フラグを判定 10 if(data[i]["B"] == 20){ 11 var myMarker = new google.maps.Marker({ 12 position: new google.maps.LatLng(data[i]["M"], data[i]["N"]), 13 map: myMap, 14 icon: new google.maps.MarkerImage("icon/home_" + data[i]["B"] + ".png") 15 }); 16 attachMessage(myMarker,"メッセージ : " + data[i]["J"] + '</br>' + "店舗名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' + 17 '<a href="#" target="_blank">お問い合わせはこちら</a>' + '</br>' + 18 '<img src="images/' + data[i]["K"] + ".jpg" + '" height="150">' ); 19 } 20 } 21 } 22 } 23 }); 24}); 25 26 27function attachMessage(marker,msg) { 28 google.maps.event.addListener(marker, 'click', function() { 29 if (openInfoWindow) { 30 openInfoWindow.close(); 31 } 32 new google.maps.Geocoder().geocode({ 33 latLng: marker.getPosition() 34 }, function(result, status) { 35 if (status == google.maps.GeocoderStatus.OK) { 36 openInfoWindow = new google.maps.InfoWindow({ 37 content: msg 38 }); 39 openInfoWindow.open(marker.getMap(), marker); 40 } 41 }); 42 }); 43} 44 45var myMap = new google.maps.Map(document.getElementById('map'), { 46 zoom: 12, 47 center: new google.maps.LatLng(34.894000, 136.930437), 48 scrollwheel: false, 49 mapTypeId: google.maps.MapTypeId.ROADMAP 50}); 51 52 53/* スタイル付き地図 */ 54 var styleOptions = [ 55 { 56 "featureType": "poi", 57 "elementType": "labels.text", 58 "stylers": [ 59 { "visibility": "off" } 60 ] 61 } 62 ]; 63 64myMap.setOptions({styles: styleOptions}); 65

追記致します。

HTMLのテーブルは以下のコードのような構成を考えています。
その中にjsonから取得したデータを入れ込みたいのですがうまくいきません。

HTML

1<table class="tennpo" border="1"> 2<tr><td rowspan="2" class="outline"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/gaikann.jpg"><img width="85" src="images/model_photo_CLAIRYUUSAKI.jpg" alt="外観"></a></td><th colspan="2">店舗名</th><th class="btn"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/tennpo.jpg"></th></tr><tr><td class="address">所在地</td><td colspan="2"></td></tr> 3</table> 4コード

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

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

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

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

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

Lhankor_Mhy

2015/10/15 06:16

InfoWindowの中にテーブルを作りたいということですか? それとももしかして、Googleマップとはまた全然別にテーブルを作りたいということですか?
shinoda

2015/10/15 08:24

コメントありがとうございます。 >InfoWindowの中にテーブルを作りたいということですか? →いえ、グーグルマップが表示されている下に別にマップに表示されている店舗の情報をテーブルで表示したいという感じです。 できればテーブルに表示されている店舗名をクリックするとマップのほうの吹き出しが表示されるといった機能も実装したいです。 今回の質問はまずjavascriptでのfor文でのテーブル作成とその中にあるデータを入れ込みたいということです。 説明不足かも知れませんがよろしくお願いします。
Lhankor_Mhy

2015/10/15 08:44

あと、質問文にドメインが書かれているので修正された方がいいと思います。アクセスをしたところ、物件名とか見えてしまいました。
shinoda

2015/10/15 08:59

ご指摘ありがとうございます。 お恥ずかしいです。 検証環境のため漏れても問題ない情報なのですが削除しました
guest

回答3

0

実際動くかわからないですが、以下のような感じで作ることはできると思います。

個人的には、変数に元となるHTMLを入れておくというのは保守性が悪いので、
本来はテンプレートエンジン的なものを使った方が良いと思います。
テンプレートエンジンについては
http://qiita.com/HelloPeople/items/7db7c8f5e5ace3b40874
が参考になりそうです。

JavaScript

1 2// tableタグ格納用変数(getJSON直後あたりに入れる感じです) 3var tableWrapper = '<table class="tennpo" border="1">'; 4var trTemplate = ''; 5 6 7// ここから店舗データ繰り返し箇所 8// 質問にあるJavaScriptの if(data[i]["C"] == 1){ の下あたりに入れる感じです 9 10 // JSONの中身がわからなかったので、以下のように変数を用いています 11 // JSONから取得した内容を入れてください 12 var shopFacadeImageUrl = ''; // 外観URL 13 var shopFacadeImagePath = ''; // 外観画像パス 14 var shopName = ''; // 店舗名 15 var shopImagePath = ''; // 店舗画像パス 16 var shopAddress = ''; // 所在地 17 trTemplate = ' <tr>' + 18 ' <td rowspan="2" class="outline">' + 19 ' <a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="' + shopFacadeImageUrl + '">' + 20 ' <img width="85" src="' + shopFacadeImagePath + '" alt="外観">' + 21 ' </a>' + 22 ' </td>' + 23 ' <th colspan="2">' + shopName + '</th>' + 24 ' <th class="btn">' + 25 ' <a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="' + shopImagePath + '">' + 26 // ここにaタグの内容と閉じタグが必要ですね 27 ' </th>' + 28 '</tr>' + 29 '<tr>' + 30 ' <td class="address">' + shopAddress + '</td>' + 31 ' <td colspan="2"></td>' + 32 '</tr>'; 33 tableWrapper += trTemplate; 34 35// ここまで繰り返し 36 37 38// table閉じタグ 39tableWrapper += '</table>'; 40 41// tableWrapperに全店舗が入ったtableタグができているので、それを表示したい箇所に入れる 42// ↓例えばidがshopTableなタグに入れる場合 43// もしかするとこのやり方だとtrTemplate内のHTMLで設定しているonclidkのJavaScriptが動作しないかもしれません 44$('#shopTable').html(tableWrapper);

投稿2015/10/15 09:42

notable

総合スコア415

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

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

shinoda

2015/10/15 09:49

ご丁寧にコード込みでのご教授ありがとうございます。 本日は検証できそうもありませんので明日以降に検証をし、不明点がありましたらまたご質問させていただきます。 どうぞ宜しくお願いします。
guest

0

こんにちは。

Web Brower には Google Chrome や Firefox を使用されていますでしょうか?
一度デバッガーを開いてコンソールタブを選択しエラーが表示されていないかを確認された方がよいでしょう。

chrome のデバッガー表示方法
http://www.buildinsider.net/web/chromedevtools/01

firefox のデバッガー表示方法
https://developer.mozilla.org/ja/docs/Tools/Debugger

エラーが特に表示されていない場合などは、下記の箇所で for する前にはじめに取得した json データの構造を確認することで開発が進むかと思います。

javascript

1 $.getJSON("json/array.json" , function(data) { 2 console.log(data); 3 for( var i in data){

投稿2015/10/13 06:46

YamaguchiKenya

総合スコア69

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

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

shinoda

2015/10/13 07:51

お世話になっております。 ご回答有り難うございました。 >Web Brower には Google Chrome や Firefox を使用されていますでしょうか? 一度デバッガーを開いてコンソールタブを選択しエラーが表示されていないかを確認された方がよいでしょう。 上記についてですが、fairebug等は使用しています。 初心者のためひとつひとつ確認しながら作成はしております。
YamaguchiKenya

2015/10/14 01:42

console.log(data) のコードを追記し、 json データの中身が取得出来ることは確認されていますか?json データの中身が取得出来ることを確認されている場合は、参照方法が誤っている可能性があるので、可能であれば json/array.json についても添付して頂けると助かります。 m(_ _)m
shinoda

2015/10/15 02:36

返信遅くなって申し訳ありません。 jsonファイルの中身については問題なく取得でき、グーグルマップには表示できているのですが、全ての中身を記載すると長くなってしまうので一部の例を記載します。 本文のコードにも記載していますが「data[i][M]」→緯度「data[i][N]」→経度のようにもともとExcelに記載されているデータをJSONに変換しその中に書かれている店舗情報を利用してグーグルマップ上に表示という機能です。 今回、つまずいているところは単純にjavascriptでテーブルをfor文で作り、その中にjsonファイルの店舗情報を入れ込むという部分です。 説明不足かも知れませんがご教授いただければ幸いです。
guest

0

ベストアンサー

javascript

1var openInfoWindow = null; 2var table = $( 3 '<table>', 4 {class: 'tennpo'} 5); 6$(function initialize() { 7 var data = new Array(); 8 $.getJSON("json/array.json" , function(data) { 9 for( var i in data){ 10 for( var j in data[i] ){ 11 if(data[i]["C"] == 1){ // 表示・非表示フラグを判定 12 if(data[i]["B"] == 20){ 13 var myMarker = new google.maps.Marker({ 14 position: new google.maps.LatLng(data[i]["M"], data[i]["N"]), 15 map: myMap, 16 icon: new google.maps.MarkerImage("icon/home_" + data[i]["B"] + ".png") 17 }); 18 attachMessage(myMarker,"メッセージ : " + data[i]["J"] + '</br>' + "店舗名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' + 19 '<a href="#" target="_blank">お問い合わせはこちら</a>' + '</br>' + 20 '<img src="images/' + data[i]["K"] + ".jpg" + '" height="150">' ); 21 table.append('<tr><td rowspan="2" class="outline"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/gaikann.jpg"><img width="85" src="images/model_photo_CLAIRYUUSAKI.jpg" alt="外観"></a></td><th colspan="2">' + 22 data[i]["D"] + 23 '</th><th class="btn"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/tennpo.jpg"></th></tr><tr><td class="address">' + 24 data[i]["E"] + 25 '</td><td colspan="2"></td></tr>'); 26 } 27 } 28 } 29 } 30 $('body').append(table); 31 }); 32}); 33

動作確認していませんが、とりあえず、こんな感じだろうと思いますが…… これ、jの方の2重ループは大丈夫なんでしょうか? マーカーやテーブルの行が余分に生成されそうな気がするんですけど……
あと、attachMessage関数内のジオコーディングもレスポンスが全然利用されてないんでこれで大丈夫なのかな、と。……他の部分で利用してるんでしょうか?

投稿2015/10/15 10:55

Lhankor_Mhy

総合スコア35865

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

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

shinoda

2015/10/15 11:24

ご回答ありがとうございます。 今日は検証できそうもありませんので明日以降に検証をし結果を報告致します。 Lhankor_Mhyさんの懸念事項に対して以下でお応え致します。 >これ、jの方の2重ループは大丈夫なんでしょうか? マーカーやテーブルの行が >余分に生成されそうな気がするんですけど…… もともとエクセルファイルをjsonに変換しているのですが、それを配列にした際にExcelの縦列と行で二次元配列になっているため2回ループを回しているのですが認識が間違っていますでしょうか? >あと、attachMessage関数内のジオコーディングもレスポンスが全然利用されて >ないんでこれで大丈夫なのかな、と。……他の部分で利用してるんでしょうか? ごめんなさい。私の知識不足のためおっしゃっている事を理解できません。 レスポンスとはどの部分を指しているのでしょうか? 以上宜しくお願い致します
Lhankor_Mhy

2015/10/16 00:51

> もともとエクセルファイルをjsonに変換しているのですが、それを配列にした際にExcelの縦列と行で二次元配列になっているため2回ループを回しているのですが認識が間違っていますでしょうか? おそらく間違っているのでは。現実にループ内で変数 j を参照している式がありませんよね? > レスポンスとはどの部分を指しているのでしょうか? 関数内で変数 result が利用されていないと思います。これはジオコーディングのレスポンスなので、利用しないのであれば Geocoder を利用する必要がないですから、むだなりくえすとをしてるのではないかなあ、と。
shinoda

2015/10/16 02:17

>おそらく間違っているのでは。現実にループ内で変数 j を参照している式がありませんよね? for( var i in data){ for( var j in data[i] ){ 上記の部分ですよね? たしかにconsolelogで見たところ2重で値をとっていました。 そもそも変数jでアクセスしようとしてもundefinedになってしまいます。 基本的な文法の部分でお恥ずかしいのですがご教授頂けますでしょうか? >関数内で変数 result が利用されていないと思います。これはジオコーディングの >レスポンスなので、利用しないのであれば Geocoder を利用する必要がないですから、 >むだなりくえすとをしてるのではないかなあ、と。 APIのresults配列の部分を見なおしてみておっしゃっている意味が何となくわかりましたもう少し調べて修正したいと思います。 先日ご回答いただいたテーブルの方はこれから検証したいと思います。 以上宜しくお願い致します。
Lhankor_Mhy

2015/10/16 04:13

ループを一つにすれば大丈夫だと思いますよ。j のループ部分を削除すればいいと思います。
shinoda

2015/10/16 06:07

お世話になっております。 まずテーブルの方はうまく実装できました。 またループの問題も無事に解決できました。 この度はご丁寧にご教授頂きましてありがとうございました。 ベストアンサーとさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問