JavaScriptによるJSONPの読取方法について

5787 PV

ブラウザは、GoogleChromeです。
JavaScriptを使って、JSONPを読み取ろうとしています。（外部サイトで逆ジオコーディングサービスを受けようとしています。）
一番下に記載のスクリプトにおいて、function run によって、TextBox1には値 ”139.6917064”、TextBox2には値"35.6894875",TextBox3には合成されたurl
"http://www42.nskint.co.jp/ReverseGeocoding/revgeo?lat=35.6894875&lng=139.6917064&limit=1&callback=getjyusyoo"
が表示されることまで確認しています。また、function getjyusyoも呼び出されているようです。
このとき、返されるJSONP

getjyusyoo({ "gis": [ 
{ "pref_name": "東京都", "city_name": "新宿区", "street_name": "西新宿二丁目", "address": "8", "lat": 35.6895, "lng": 139.69164, "distance": 7.459045544, "type": 0 }
 ] })

から、textBox4に"東京都"、textBox5に"新宿区"と表示させたいのですが、pref や city は"undefined"となってしまいます。どのように書いたら良いでしょうか。

<script type="text/javascript">

   function run() {

            // 現在の位置情報を取得
            navigator.geolocation.getCurrentPosition(

              // 位置情報の取得に成功
              function (pos) {
                  var locationlat = pos.coords.latitude;
                  var locationlon = pos.coords.longitude;

                  var result = document.getElementById('<%= TextBox1.ClientID%>');
                  result.value = locationlon;

                  var result = document.getElementById('<%= TextBox2.ClientID%>');
                  result.value = locationlat;


                      var url = 'http://www42.nskint.co.jp/ReverseGeocoding/revgeo' + '?lat=' + locationlat + '&lng=' + locationlon + '&limit=1&callback=getjyusyo';

                      var result = document.getElementById('<%=TextBox3.ClientID%>');
                      result.value = url;

                      var scr = document.createElement('script')

                      scr.type = 'text/javascript';
                      scr.src = url;

                     document.getElementsByTagName('body').item(0).appendChild(scr);

              }

              )
        }


     function getjyusyo(data) {
         var pref = data.gis.pref_name；
         var city = data.gis.city；

         var result = document.getElementById('<%=TextBox4.ClientID%>');
         result.value = pref;

         var result = document.getElementById('<%=TextBox5.ClientID%>');
         result.value = city;

     }

</script>

structure

● 2

2015/03/30 13:47 投稿

2015/03/30 16:40 編集

履歴 (3)

jQuery.ajax を使えば簡単だと思いますが、使わない理由があれば教えてください。 - SurferOnWww 2015/03/30 16:55
恥ずかしながら今まで使ったことがありませんでしたので…。 - structure 2015/03/30 17:20

回答

評価順新着順更新順

最初の質問に書いてある「このとき、返されるJSONP」というのを見ると、getjyusyoo の引数に渡されるのは JSON の文字列のようですね（JavaScript オブジェクトではなくて）。

であれば、それをパースして JavaScript オブジェクトに変換してから処理してはいかがですか？

以下のような感じです（検証はしてませんので、あくまで「感じ」です）。

function getjyusyo(data) {
    var a = "";            
    if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
        a = JSON.parse(data);
    } else {
        a = eval('(' + data + ')');
    }

    var pref = a.gis[0].pref_name;
    var city = a.gis[0].city_name;

    // ・・・中略・・・
}

jQuery.ajax を使うとパース等を含めてもっと簡単にできるはずです。

SurferOnWww

1134

● 1 ● 3 ● 3

2015/03/30 17:56 投稿

2015/03/31 11:05 編集

編集履歴 (1)

parseについては引っかかってしまいうまくいかなかったのですが、var prefについてはparseを通さなくても、"var pref = data.gis[0].pref_name" で正しく取得できました。誠にありがとうございました。 - structure 2015/04/06 12:26
ということは、data はパース済みの JavaScript オブジェクトということでしょうか？ - SurferOnWww 2015/04/06 13:13

コードを載せておきます。function run で、txtJYUSYOに値が入ります。

<script type="text/javascript">
   function run() {

            // 現在の位置情報を取得
            navigator.geolocation.getCurrentPosition(

              // （1）位置情報の取得に成功した場合
              function (pos) {
                  var locationlat = pos.coords.latitude;
                  var locationlon = pos.coords.longitude;


                      var url = 'http://www42.nskint.co.jp/ReverseGeocoding/revgeo' + '?lat=' + locationlat + '&lng=' + locationlon + '&limit=1&callback=getjyusyo';


                      var scr = document.createElement('script')

                      scr.type = 'text/javascript';
                      scr.src = url;

                      document.getElementsByTagName('body').item(0).appendChild(scr);

              },

                    function (error) {
                        var message = "";

                        switch (error.code) {

                            // 位置情報が取得できない場合
                            case error.POSITION_UNAVAILABLE:
                                message = "位置情報の取得ができませんでした。";
                                break;

                                // Geolocationの使用が許可されない場合
                            case error.PERMISSION_DENIED:
                                message = "位置情報取得の使用許可がされませんでした。";
                                break;

                                // タイムアウトした場合
                            case error.PERMISSION_DENIED_TIMEOUT:
                                message = "位置情報取得中にタイムアウトしました。";
                                break;
                        }
                        window.alert(message);
                    }

              )
        }

        function getjyusyo(data) {
            var pref = data.gis[0].pref_name;
            var city = data.gis[0].city_name;

            var result = document.getElementById('<%=txtJYUSYO.ClientID%>');
            result.value = pref + city;

        }
</script>