javascriptのエラーの意味

お世話になります。

まずはコード書きます。

<!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> <script> $(function() { $.getJSON("array.json" , function(data) { for (key in data) { alert(key + " : " + data[key]); } }); }); </script> </head> <body> </body> </html> ***************************

上記を実行するとアラートに（1 : [object Object]）と表示され要素は取得されず

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

というエラーが出ます。

このエラーの意味と要素が取り出せない原因は何でしょうか？

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

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

回答3件

JSONオブジェクトを２度回しているのがおかしいと思われ。

JavaScript
1for(var i in data){   // ここでJSONの外側("1","2","3",...)をまわしてる
2  for(var j in data[i] ){   // ここで、data[i]の中を回してる。("A","B","C",...)
3    alert( i + j + data[i][j] );
4  }
5}

内側のfor分は不要ではありませんか？

また、jsonの"1","2"のデータはヘッダか何かですか？
M,Nの値が緯度経度として不正ですね。
「数値.数値」の形の時だけ処理するには下記のコードはどうでしょうか？

JavaScript
1var re= new RegExp("\d+\.\d+");  // 数値.数値かどうかの正規表現
2for(var i in data){
3  if (re.test(data[i]["M"]) && re.test(data[i]["N"])) {
4    // 確認のためコンソールに緯度経度を表示
5    console.log("緯度経度：" + data[i]["M"] + ', ' + data[i]["N"]);
6    // google map の処理
7  }
8}

あと、他の回答者の方もalert()ではなくconsole.log()を薦めてますが、そちらを使いましょう！

投稿2015/09/04 09:08

rk7fd3s

総合スコア61

shinoda

2015/09/04 09:33

お世話になっております。ご回答ありがとうございます。まずはうまくいきました。（下記コード記載）＞内側のfor分は不要ではありませんか？ 2次元配列なのでネストしているのですが、認識が間違っていますでしょうか？＞また、jsonの"1","2"のデータはヘッダか何かですか？もともとjsonファイルを生成する際に、エクセルをphpでjsonに変換して、そのファイルをjavascriptで読みグーグルマップに表示するという機能を実装しているのでそのような形になっております。＞あと、他の回答者の方もalert()ではなくconsole.log()を薦めてますが、そちらを使いましょう！ご指摘ありがとうございます。 1行ずつ確認したくてアラートを使っていました。基本はコンソールで確認はしております。 <!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>

rk7fd3s

2015/09/04 09:55 編集

＞＞内側のfor分は不要ではありませんか？＞2次元配列なのでネストしているのですが、認識が間違っていますでしょうか？ for文でしたね。　てへへ。えっと。 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"]); } } の内側のfor文の中で変数j を使ってませんよね？これだと、上のJSONの例では３☓17(A～Q)＝51回ほど var myMarker = new google.maps.Ma・・・を繰り返す事になると思うのですが。。。。

shinoda

2015/09/04 11:55

ご指摘ありがとうございます。初心者なもので見当違いかもしれませんがお許し下さい position: new google.maps.LatLng(ｊ["M"], ｊ["N"]), のようにしたほうが良いということでしょうか？

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

alertで[object Object]出るときは単純に文字列にできない形式だからです。

ブラウザのコンソールを開いてconsole.log(data)とするとdataの中身がわかります。
他の回答でJSON載せられていたので拝見しましたが

dataは

javascript
11:  {
2    A: '管理番号',
3    B: '種別',
4    (以下略)
5}

というオブジェクトなので

alert(data[key].A)

などとすればアクセスできると思います。

投稿2015/09/04 02:35

編集2015/09/04 02:36

_Hiroshi_

総合スコア29

shinoda

2015/09/04 03:07

お世話になっております。ご回答有り難うございます **************** $(function() { $.getJSON("array.json" , function(data) { for( var i in data){ for( var j in data[i] ){ alert( i + j + data[i][j] ); } } }); }); **************** 上記のようにアクセスすることはできましたが、別件の質問になりますが本来の使用目的のアクセスした要素を変数に代入してという部分でつまずいています。他の回答者の方にもそのような形で質問しているため、この質問をクローズしておりませんでした。ご回答ありがとうございました。

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

ベストアンサー

$(function() {
  $.getJSON("array.json" , function(data) {
     $.each(data, function(obj, val) {
         alert(val);
         //console.log(val); //これで確認しましょう
     });
  });
});

こんなふうにすると、取れます。

追記

$(function() {
  $.getJSON("array.json" , function(data) {
     $.each(data, function(obj, val) {
         alert(val.M);
     });
  });
});

投稿2015/09/02 11:13

編集2015/09/02 11:50

退会済みユーザー

総合スコア0

shinoda

2015/09/02 11:23

お世話になっております。早速のご回答有難うございます。試してみましたが同じエラーが出て、さらにキーの取得もできていませんでした。

退会済みユーザー

2015/09/02 11:29 編集

> 試してみましたが同じエラーが出て、さらにキーの取得もできていませんでした。ということは、JSONの階層がまだ深いのですね。実際のJSONデータと、取り出したい値を追記してください。 >さらにキーの取得もできていませんでした。キーはobjに格納されます。

shinoda

2015/09/02 11:40

長くなりますがご了承ください ************************** {"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}} ********************* 取り出したい値については「M」「N」の緯度・経度です。この値を利用してグーグルマップに表示したいと考えています。

退会済みユーザー

2015/09/02 11:53 編集

回答に追記しました。？？このJSONはどのように生成しましたか？？フォーマットがなんか変です。エンコードもされていないようですし…

shinoda

2015/09/02 11:57

追記されたコードで取れましたということはM、Nを取ってMarkerに格納してマップに表示すれば大丈夫そうですね＞？？このJSONはどのように生成しましたか？？＞フォーマットがなんか変です。エクセルシートをJSONに変換した状態です。

退会済みユーザー

2015/09/02 12:00

マルチバイトはもしかしたら文字化けが起こることもあるかもです。本来URLエンコードする決まりになったいるので… ブラウザによってはよしなにやってくれるかもしれませんが、すべての環境での動作を保証できないのでは？

shinoda

2015/09/02 12:10

ごめんなさい私の知識不足のため懸念事項の全てを読み取ることができません。 file_put_contents('array.json', json_encode($data,JSON_UNESCAPED_UNICODE, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP )); phpでエンコードする際になにか抜けているということでしょうか？

退会済みユーザー

2015/09/02 12:24 編集

なるほど、JSON_UNESCAPED_UNICODE は不要だと思いますよ。あくまでそれはデバッグ時にのみ利用するオプションです。

shinoda

2015/09/02 12:35

仰るとおり開発段階で見づらいため入力しています markers = [] ; markers[0] = new google.maps.Marker( {...} ); //1つ目のマーカー markers[1] = new google.maps.Marker( {...} ); //2つ目のマーカー markers[2] = new google.maps.Marker( {...} ); //3つ目のマーカー各マーカーに先ほどのjsonの各行を代入する場合はどのように書けば短く書けますでしょうか？ 1行ずつ代入していく方法しか思い浮かばないもので...

退会済みユーザー

2015/09/02 12:38

$.each(json, function(){ //ここで代入すればいい });

shinoda

2015/09/03 04:26

お世話になっております。ちょっと脱線しますが以下のようにfor~inを使うのとeachではどちらのほうが良いとかはありますでしょうか？ ****************** $(function() { $.getJSON("array.json" , function(data) { for( var i in data){ for( var j in data[i] ){ alert( i + j + data[i][j] ); } } }); }); *******************

退会済みユーザー

2015/09/03 07:02

好みでしょうね…。

shinoda

2015/09/04 08:33

お世話になっております。 ★印部分で質問させてください。アラートで表示した際に配列の値は取れているのは確認できたのですが、マップに反映されなくて困っています。もしおわかりでしたらご教授頂けますでしょうか？宜しくお願い致します。 <!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]["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"]); } } }); }); 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(34.894000, 136.930437), scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); </script> </body> </html>

退会済みユーザー

2015/09/04 08:39

> var myMarker = new google.maps.Marker({ myMarker は配列でないといけませんね。

shinoda

2015/09/04 09:26

お世話になっております。迅速なご回答有り難うございます。今試している間にうまくいきました。追記でご質問ですが、 $readFile = "karidata.xlsx"; /*if ($readFile == "karidata.xlsx";) { } else { exit; }; 上記の場合、$readFileがkaridata.xlsxじゃなかったら処理終了ということであっていますよね？

退会済みユーザー

2015/09/04 09:38

あってるけど… $readFile = "karidata.xlsx"; なんだからif文は全く意味がありませんね…

shinoda

2015/09/04 11:46

失礼致しました聞きたかったことは下記のようにした場合、$formFileがkaridata.xlsxだったら$readfileに代入するということでした。 $formfileというのはindex.htmlから渡ってきたものです。 if ($readFile == $formfile;) { $readFile = "karidata.xlsx"; } else { exit; };

退会済みユーザー

2015/09/04 12:20

何れにしても…試せばわかることでは？

shinoda

2015/09/07 04:55

お世話になっております追記で質問ばかりして申し訳ありません下記コードの★印のようにdata[i]の中身がnullだった場合、nullにブランクを代入したいのですがどのように記述すればよろしいでしょうか？ $(function() { var data = new Array(); $.getJSON("array.json" , function(data) { for( var i in data){ for( var j in data[i] ){ ★if(data[i] == null){ null = ""; var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(data[i]["M"], data[i]["N"]), map: myMap, }); attachMessage(myMarker, data[i]["D"] + '</br>' + data[i]["E"]); } } } }); });

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

あなたの回答