Flow Flow - 4 months ago 12
JSON Question

Reading JSON data from Google Geocoding API with jQuery

I am trying to learn about Google Maps Geocoding and how to read the JSON data it sends back. This is what Google sends back:

{
"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"
}


I get this response with this code:

$("#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
}
});


The problem is I don't know what to put inside
processJSON
. I was reading the tutorial here: https://www.sitepoint.com/ajaxjquery-getjson-simple-example/ and the documentation on
.getJSON()
on http://api.jquery.com/jquery.getjson/. However, I'm having trouble understanding both sites.

If I wanted to get the
postal_code
, how would I do read the data? I tried this:

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


I tried it with
getJSON()
as well after
success
:

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


However, neither alert anything. What am I doing wrong? Thanks in advance!

Answer

add success function after youu ajax

$("#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.address_components[6].long_name);
  }
});