Q&A
お世話になっております。
ご回答ありがとうございました
以下の様な形で全てのデータが取れましたので最初のご回答に当て込めば良さそうですかね？
*****************
for( var i in data){
for( var j in data[i] ){
alert( i + j + data[i][j] );
}
}
********************
お世話になります。
現在、JSONのデータをグーグルマップに表示する機能を実装しようとしているのですが、JSONのデータをループで取れなくて困っています。
よろしければご教授ください。
作成中のコードを記載します
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【javascript】
$(function(){
//JSONファイル読み込み開始
$.ajax({
url:"array.json",//外部ファイル
cache:false,
dataType:"json",
success:function(json){
var data=jsonRequest(json);
initialize(data);
}
});
});
// JSONファイル読み込みマーカーへデータ格納
function jsonRequest(json){
var data=[];
if(json.Marker){
var n=json.Marker.length;
for(var i=0;i<n;i++){
data.push(json.Marker[i]);
}
}
return data;
}
// Attach Message
function attach_message( map, marker, msg, iw ){
google.maps.event.addListener(marker, 'click',
function( event ){
iw.setContent( msg );iw.open(map, marker);});
}
function initialize(data){
var opts={
zoom:15,
center:new google.maps.LatLng(35.681382,139.766084),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map
(document.getElementById("map_canvas"),opts);
if (data != null) {
var i=data.length;
}
var iw = new google.maps.InfoWindow();
while(i-- >0){
var dat=data[i];
var obj={
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map
};
var marker=new google.maps.Marker(obj);
attach_message(map, marker, dat.content,iw);
//マップクリックイベントを追加
google.maps.event.addListener(map, 'click', function(e) {
//インフォウィンドウを消去
iw.close();
});
}
}
【JSONの中身】
{"1":{"A":"管理番号","B":"種別","C":"公開有無","D":"物件名","E":"住所","F":"全戸数","G":"入居戸数","H":"イベント開催開始日","I":"イベント開催終了日","J":"メッセージ","K":"外観画像ファイル名","L":"イベントPDFファイル名","M":"緯度","N":"経度","O":"外観画像ファイル名","P":"イベントPDFファイル名","Q":null},
"2":{"A":null,"B":"10：イベント\n20：モデルルーム\n30：実績（満室）\n31：実績（空室あり）","C":"0：非公開\n1：公開","D":null,"E":"必須","F":"「種別」が30もしくは31の場合に必須","G":"「種別」が31の場合に必須","H":"「種別」が10の場合に必須","I":"「種別」が10、かつイベント開催開始日と異なる場合に必須","J":"「種別」が10の場合に必須","K":null,"L":null,"M":null,"N":null,"O":"システムでの利用","P":"システムでの利用","Q":null},
"3":{"A":1,"B":10,"C":1,"D":"null","E":"null","F":null,"G":null,"H":null,"I":null,"J":null,"K":null,"L":null,"M":36.036802,"N":140.063076,"O":null,"P":null,"Q":null}}
【質問】
jsonの中身の「M」「N」の緯度・経度をマーカーに格納しマップに表示したいのですが、格納の仕方がわからず困っています。
キーがA,B,C...となっているのは、エクセルファイルをJSONに変換しているためです、同じ理由で第一階層の1.2.3...もです。
簡単なfor文のところでつまずいています。
for～inで縦列を回して、さらにネストして横列を取得し、条件分岐という感じでしょうか？
以上長文になってしまいましたが、ご教授宜しくお願い致します。
回答2件
0
dataをjsonオブジェクトでなく、配列(と言っても、結局オブジェクト・・・)で書いてみました。
すみません、ソースは手抜きです・・・そのままコピペでhtml拡張子で保存してブラウザに
放り込んでもらったら動きます。
JavaScript
1<html><body> 2<div id="map" style="width: 400px; height: 280px;"></div> 3<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 4<script language="JavaScript"> 5var getdata = { 6 "1":{ "A":"data A1", "B":"35.001", "C":"139.001" } 7 ,"2":{ "A":"data A2", "B":"35.002", "C":"139.002" } 8 ,"3":{ "A":"data A3", "B":"35.003", "C":"139.003" } 9}; 10 11var data = new Array(); 12 13for( var i in getdata ){ 14 data[i] = new Array(); 15 data[i][1] = new google.maps.LatLng(getdata[i]["B"], getdata[i]["C"]); 16 data[i][2] = getdata[i]["A"]; 17} 18 19function attachMessage(marker,msg) { 20 google.maps.event.addListener(marker, 'click', function() { 21 new google.maps.Geocoder().geocode({ 22 latLng: marker.getPosition() 23 }, function(result, status) { 24 if (status == google.maps.GeocoderStatus.OK) { 25 new google.maps.InfoWindow({ 26 content: msg 27 }).open(marker.getMap(), marker); 28 } 29 }); 30 }); 31} 32 33var myMap = new google.maps.Map(document.getElementById('map'), { 34 zoom: 14, 35 center: new google.maps.LatLng(35, 139), 36 scrollwheel: false, 37 mapTypeId: google.maps.MapTypeId.ROADMAP 38}); 39 40for ( var i in data ) { 41 var myMarker = new google.maps.Marker({ 42 position: data[i][1], 43 map: myMap, 44 }); 45 attachMessage(myMarker, data[i][2]); 46} 47</script></body></html>
投稿2015/09/02 14:35
編集2015/09/02 15:18
総合スコア1768
0
ベストアンサー
以下のようなサンプルでデータの取り出し方が分かりますでしょうか？
JavaScript
1<html><body><script language="JavaScript"> 2var data = { 3 "1":{ "A":"data A1", "B":"data B1" } 4 ,"2":{ "A":"data A2", "B":"data B2" } 5}; 6 7alert( data["1"]["B"]); 8 9for( var i in data){ 10 for( var j in data[i] ){ 11 alert( i + j + data[i][j] ); 12 } 13} 14</script></body></html>
forで回すところは、ご質問にある通り、lengthにした方が良いかもしれません。
投稿2015/09/02 13:26
総合スコア1768
お世話になっております
インライン(★)でご質問します
<html>
<body>
<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript">
********************************************
var getdata = {
"1":{ "A":"data A1", "B":"35.001", "C":"139.001" }
,"2":{ "A":"data A2", "B":"35.002", "C":"139.002" }
,"3":{ "A":"data A3", "B":"35.003", "C":"139.003" }
};
var data = new Array();
for( var i in getdata ){
data[i] = new Array();
data[i][1] = new google.maps.LatLng(getdata[i]["B"], getdata[i]["C"]);
data[i][2] = getdata[i]["A"];
}
★ $(function() {
$.getJSON("array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
data[i] = new Array();
data[i][1] = new google.maps.LatLng(getdata[i]["B"], getdata[i]["C"]);
data[i][2] = getdata[i]["A"];
}
}
});
});
********************************************
function attachMessage(marker,msg) {
google.maps.event.addListener(marker, 'click', function() {
new google.maps.Geocoder().geocode({
latLng: marker.getPosition()
}, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
}
});
});
}
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(35, 139),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for ( var i in data ) {
var myMarker = new google.maps.Marker({
position: data[i][1],
map: myMap,
});
attachMessage(myMarker, data[i][2]);
}
</script>
</body>
</html>
全然見当違いの質問かも知れませんがどうぞ宜しくお願いします
ご質問にありました、JSONのデータのハッシュキーに合わせると B, C の部分が M,Nになるのでしょうか？
吹き出しに記述する内容をハッシュキーのAの値にしておりますが、目的に合わせて修正ください。
先の例では、あえて配列に置きなおしていますが、そもそもgetdataが、ハッシュのハッシュになっていますので、あえて置きなおさずとも、そのままデータの取り出しが可能ですので、以下の様にすれば直接マップへの落とし込みができそうです。(コードは試験してません)
★
$(function() {
var data = new Array();
$.getJSON("array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
map: myMap,
});
attachMessage(myMarker, data[i][2]);
}
}
});
})
インデント、消えちゃうんですね・・・
お世話になっております。
見なおしてみたら回答の質問のテキストが消えてました。
読み取ってご回答してくださってありがとうございます。
ご回答のコードで試してみましたがうまくいきませんでした（実際のコードを下記に記載）
★印の部分で確認しましたが1行目の「緯度」「経度」しか取得されていませんでした。
すごく初歩的な質問で申し訳ありませんがdata[i]にjsonの配列を格納し、data[j]に2階層目の配列を格納しているという認識であっていますでしょうか？
以上宜しくお願い致します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 280px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript">
$(function() {
var data = new Array();
$.getJSON("array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
★ alert(data[i]["M"] + data[i]["N"]);
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
map: myMap,
});
attachMessage(myMarker, data[i][2]);
}
}
});
})
function attachMessage(marker,msg) {
google.maps.event.addListener(marker, 'click', function() {
new google.maps.Geocoder().geocode({
latLng: marker.getPosition()
}, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
}
});
});
}
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(35, 139),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>
</body>
</html>
追記致します
以下の様なエラーが出ていました
uncaught exception
何度も追記して申し訳ありません
先ほどのエラーは消え、値は取れているのは確認できましたが、やはりマップへの落としこみができていない状況です
追記致します。
いろいろ試しているうちに無事に動作しました（下記コード記載）
ありがとうございました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript">
$(function() {
var data = new Array();
$.getJSON("array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
//alert(data[i]["M"] + data[i]["N"]); デバッグ用
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
map: myMap,
});
attachMessage(myMarker, data[i]["J"]);
}
}
});
});
function attachMessage(marker,msg) {
google.maps.event.addListener(marker, 'click', function() {
new google.maps.Geocoder().geocode({
latLng: marker.getPosition()
}, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.InfoWindow({
content: msg
}).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
});
</script>
</body>
</html>
返信が遅くなってすみませんでした。。。解決なさったようで良かったです。
JSONのデータ構造がハッシュのハッシュになっていることから、
var data = {
1:{A:1, B:2, C:3 }
2:{A:4, B:5, C:6 }
}
の場合、 date["1"]["A"] には 1が, ... , date["2"]["C"] には 6が入っています。
for ( var i in data ){
alert(i);
alert(data[i]["C"];
}
をすると、iの値が 1, 2 となると思います。このforで i は、1階層目のハッシュの
値をとってきてるんですね。
2個めのalertでは、1周目が data["1"]["C"]の値の 3 が、2周目は data["2"]["C"]
の値 6 が表示されることと思います。
私も googlemapに messagesをattachする方法の良い勉強になりました。
ありがとうございました。
お世話になっております。
ちょっと疑問に思った部分がありますので質問させてください。
★印の部分でfor~inでvar jに全てを格納しているのに▲の部分でマーカーに格納する際、(data[i]["M"], data[i]["N"])という風にjという変数を使わない意味はあるのでしょうか？
よろしければご教授ください。
$(function() {
var data = new Array();
$.getJSON("array.json" , function(data) {
for( var i in data){
★ for( var j in data[i] ){
//alert(j); //デバッグ用
var myMarker = new google.maps.Marker({
▲position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
map: myMap,
});
attachMessage(myMarker, data[i]["J"]);
}
}
});
});
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。