jQueryを使用してGoogleジオコーディングAPIからJSONデータを読み取る

Question

Google Mapsジオコーディングと、返されたJSONデータを読み取る方法について学習しようとしています。これは、Googleが送り返すものです：

{ 
    "results" : [ 
     { 
     "address_components" : [ 
      { 
       "long_name" : "1600", 
       "short_name" : "1600", 
       "types" : [ "street_number" ] 
      }, 
      { 
       "long_name" : "Amphitheatre Pkwy", 
       "short_name" : "Amphitheatre Pkwy", 
       "types" : [ "route" ] 
      }, 
      { 
       "long_name" : "Mountain View", 
       "short_name" : "Mountain View", 
       "types" : [ "locality", "political" ] 
      }, 
      { 
       "long_name" : "Santa Clara County", 
       "short_name" : "Santa Clara County", 
       "types" : [ "administrative_area_level_2", "political" ] 
      }, 
      { 
       "long_name" : "California", 
       "short_name" : "CA", 
       "types" : [ "administrative_area_level_1", "political" ] 
      }, 
      { 
       "long_name" : "United States", 
       "short_name" : "US", 
       "types" : [ "country", "political" ] 
      }, 
      { 
       "long_name" : "94043", 
       "short_name" : "94043", 
       "types" : [ "postal_code" ] 
      } 
     ], 
     "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA", 
     "geometry" : { 
      "location" : { 
       "lat" : 37.4224764, 
       "lng" : -122.0842499 
      }, 
      "location_type" : "ROOFTOP", 
      "viewport" : { 
       "northeast" : { 
        "lat" : 37.4238253802915, 
        "lng" : -122.0829009197085 
       }, 
       "southwest" : { 
        "lat" : 37.4211274197085, 
        "lng" : -122.0855988802915 
       } 
      } 
     }, 
     "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA", 
     "types" : [ "street_address" ] 
     } 
    ], 
    "status" : "OK" 
} 

私はこのコードでこの応答を取得：

$("#submit").click(function(event) { 
    var address = encodeURIComponent($("#location").val()); 

    $.ajax({ 
    type: "GET", 
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY, 
    dataType: "json", 
    success: processJSON 
    }); 

    function processJSON(json) { 
    // Do stuff here 
    } 
}); 

問題は、私はprocessJSONの内側に配置するかわからないです。チュートリアルはhttps://www.sitepoint.com/ajaxjquery-getjson-simple-example/、.getJSON()のドキュメントはhttp://api.jquery.com/jquery.getjson/にあります。しかし、私は両方のサイトを理解するのに困っています。

postal_codeを取得したい場合は、データをどのように読み取るのですか？私もsuccess後getJSON()でそれを試してみました

function processJSON(json) { 
    // Do stuff here 
    alert("Postal Code:" + json.address_components[6].long_name); 
    } 

：

$.getJSON(url, function(json) { 
    alert("Postal Code:" + json.address_components[6].long_name); 
}); 

しかし、どちらの警告何かを私はこれを試してみました。私は間違って何をしていますか？前もって感謝します！

Answer 1

youuは、あなたがあなたの成功の機能上のデータを解析する必要があるだろう

$("#submit").click(function(event) { 
    var address = encodeURIComponent($("#location").val()); 

    $.ajax({ 
    type: "GET", 
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY, 
    dataType: "json", 
    success: processJSON 
    }).success(function(data){ 
    processJSON(data); 
    } 

    function processJSON(json) { 
    // Do stuff here 
    console.log(json); 
    alert("Postal Code:" + json.results[0].address_components[6].long_name); 
    } 
}); 

Answer 2

をAjaxの後に成功機能を追加します。

function processJSON(data) { 
    var json = JSON.parse(data); 
    //.. 
} 

また、それは関数に行かせたこと、同様にあなたの$アヤックスに

$.ajax({ 
    type.. 
    url... 
    success.. 
    error: function() { 
     console.log('error on request') 
    } 
    ...