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

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

ただいまの
回答率

89.86%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,432

shinoda

score 86

お世話になります。

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

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

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

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

var openInfoWindow = null;

$(function initialize() {
  var data = new Array();
  $.getJSON("json/array.json" , function(data) {
    for( var i in data){
      for( var j in data[i] ){
        if(data[i]["C"] == 1){ // 表示・非表示フラグを判定
          if(data[i]["B"] == 20){
            var myMarker = new google.maps.Marker({
            position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
            map: myMap,
            icon: new google.maps.MarkerImage("icon/home_" + data[i]["B"] + ".png")
            });
            attachMessage(myMarker,"メッセージ : " + data[i]["J"] + '</br>' + "店舗名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' + 
            '<a href="#" target="_blank">お問い合わせはこちら</a>' + '</br>' + 
            '<img src="images/' + data[i]["K"] + ".jpg" + '" height="150">' );
          }
        }
      }
    }
  });
});


function attachMessage(marker,msg) {
  google.maps.event.addListener(marker, 'click', function() {
    if (openInfoWindow) {
    openInfoWindow.close();
    }
    new google.maps.Geocoder().geocode({
      latLng: marker.getPosition()
    }, function(result, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        openInfoWindow = new google.maps.InfoWindow({
        content: msg
        });
        openInfoWindow.open(marker.getMap(), marker);
      }
    });
  });
}

var myMap = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: new google.maps.LatLng(34.894000, 136.930437),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});


/* スタイル付き地図 */ 
  var styleOptions = [ 
    { 
    "featureType": "poi", 
    "elementType": "labels.text", 
    "stylers": [ 
      { "visibility": "off" } 
    ] 
    } 
  ]; 

myMap.setOptions({styles: styleOptions});

追記致します。

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

<table class="tennpo" border="1">
<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>
</table>
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2015/10/15 15:16

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

    キャンセル

  • shinoda

    2015/10/15 17:24

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

    >InfoWindowの中にテーブルを作りたいということですか?
    →いえ、グーグルマップが表示されている下に別にマップに表示されている店舗の情報をテーブルで表示したいという感じです。
    できればテーブルに表示されている店舗名をクリックするとマップのほうの吹き出しが表示されるといった機能も実装したいです。

    今回の質問はまずjavascriptでのfor文でのテーブル作成とその中にあるデータを入れ込みたいということです。

    説明不足かも知れませんがよろしくお願いします。

    キャンセル

  • Lhankor_Mhy

    2015/10/15 17:44

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

    キャンセル

  • shinoda

    2015/10/15 17:59

    ご指摘ありがとうございます。
    お恥ずかしいです。

    検証環境のため漏れても問題ない情報なのですが削除しました

    キャンセル

回答 3

+1

こんにちは。

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/13 16:51

    お世話になっております。

    ご回答有り難うございました。

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

    上記についてですが、fairebug等は使用しています。
    初心者のためひとつひとつ確認しながら作成はしております。

    キャンセル

  • 2015/10/14 10:42

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

    キャンセル

  • 2015/10/15 11:36

    返信遅くなって申し訳ありません。

    jsonファイルの中身については問題なく取得でき、グーグルマップには表示できているのですが、全ての中身を記載すると長くなってしまうので一部の例を記載します。

    本文のコードにも記載していますが「data[i][M]」→緯度「data[i][N]」→経度のようにもともとExcelに記載されているデータをJSONに変換しその中に書かれている店舗情報を利用してグーグルマップ上に表示という機能です。

    今回、つまずいているところは単純にjavascriptでテーブルをfor文で作り、その中にjsonファイルの店舗情報を入れ込むという部分です。

    説明不足かも知れませんがご教授いただければ幸いです。

    キャンセル

+1

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

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

// tableタグ格納用変数(getJSON直後あたりに入れる感じです)
var tableWrapper = '<table class="tennpo" border="1">';
var trTemplate = '';


// ここから店舗データ繰り返し箇所
// 質問にあるJavaScriptの if(data[i]["C"] == 1){ の下あたりに入れる感じです

    // JSONの中身がわからなかったので、以下のように変数を用いています
    // JSONから取得した内容を入れてください
    var shopFacadeImageUrl = '';    // 外観URL
    var shopFacadeImagePath = '';    // 外観画像パス
    var shopName = '';    // 店舗名
    var shopImagePath = '';    // 店舗画像パス
    var shopAddress = '';    // 所在地
    trTemplate = '    <tr>' +
        '    <td rowspan="2" class="outline">' +
        '        <a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="' + shopFacadeImageUrl + '">' +
        '            <img width="85" src="' + shopFacadeImagePath + '" alt="外観">' +
        '        </a>' +
        '    </td>' +
        '    <th colspan="2">' + shopName + '</th>' +
        '    <th class="btn">' +
        '        <a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="' + shopImagePath + '">' +
    // ここにaタグの内容と閉じタグが必要ですね
        '    </th>' +
        '</tr>' +
        '<tr>' +
        '    <td class="address">' + shopAddress + '</td>' +
        '    <td colspan="2"></td>' +
        '</tr>';
    tableWrapper += trTemplate;

// ここまで繰り返し


// table閉じタグ
tableWrapper += '</table>';

// tableWrapperに全店舗が入ったtableタグができているので、それを表示したい箇所に入れる
// ↓例えばidがshopTableなタグに入れる場合
// もしかするとこのやり方だとtrTemplate内のHTMLで設定しているonclidkのJavaScriptが動作しないかもしれません
$('#shopTable').html(tableWrapper);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/15 18:49

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

    キャンセル

checkベストアンサー

0

var openInfoWindow = null;
var table = $(
  '<table>',
  {class: 'tennpo'}
);
$(function initialize() {
  var data = new Array();
  $.getJSON("json/array.json" , function(data) {
    for( var i in data){
      for( var j in data[i] ){
        if(data[i]["C"] == 1){ // 表示・非表示フラグを判定
          if(data[i]["B"] == 20){
            var myMarker = new google.maps.Marker({
            position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
            map: myMap,
            icon: new google.maps.MarkerImage("icon/home_" + data[i]["B"] + ".png")
            });
            attachMessage(myMarker,"メッセージ : " + data[i]["J"] + '</br>' + "店舗名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' + 
            '<a href="#" target="_blank">お問い合わせはこちら</a>' + '</br>' + 
            '<img src="images/' + data[i]["K"] + ".jpg" + '" height="150">' );
            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">' +
            data[i]["D"] +
            '</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">' +
            data[i]["E"] +
            '</td><td colspan="2"></td></tr>');
          }
        }
      }
    }
    $('body').append(table);
  });
});
動作確認していませんが、とりあえず、こんな感じだろうと思いますが…… これ、jの方の2重ループは大丈夫なんでしょうか? マーカーやテーブルの行が余分に生成されそうな気がするんですけど……
あと、attachMessage関数内のジオコーディングもレスポンスが全然利用されてないんでこれで大丈夫なのかな、と。……他の部分で利用してるんでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/16 11:17

    >おそらく間違っているのでは。現実にループ内で変数 j を参照している式がありませんよね?

    for( var i in data){
    for( var j in data[i] ){
    上記の部分ですよね?
    たしかにconsolelogで見たところ2重で値をとっていました。
    そもそも変数jでアクセスしようとしてもundefinedになってしまいます。

    基本的な文法の部分でお恥ずかしいのですがご教授頂けますでしょうか?

    >関数内で変数 result が利用されていないと思います。これはジオコーディングの
    >レスポンスなので、利用しないのであれば Geocoder を利用する必要がないですから、
    >むだなりくえすとをしてるのではないかなあ、と。

    APIのresults配列の部分を見なおしてみておっしゃっている意味が何となくわかりましたもう少し調べて修正したいと思います。

    先日ご回答いただいたテーブルの方はこれから検証したいと思います。

    以上宜しくお願い致します。

    キャンセル

  • 2015/10/16 13:13

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

    キャンセル

  • 2015/10/16 15:07

    お世話になっております。

    まずテーブルの方はうまく実装できました。
    またループの問題も無事に解決できました。

    この度はご丁寧にご教授頂きましてありがとうございました。
    ベストアンサーとさせていただきます。

    キャンセル

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

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる