Reading JSON data from Google Geocoding API with jQuery

Question

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!

LF-DevJourney · Accepted Answer · 2016-07-30 01:34:38Z

4

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.results[0].address_components[6].long_name);
  }
});

edited Jul 30, 2016 at 1:34

answered Jul 30, 2016 at 1:15

LF-DevJourney

28.6k30 gold badges170 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

syy Over a year ago

Thanks, that made it go into the function; however, it says address_components is undefined.

LF-DevJourney Over a year ago

json.results.address_components[6].long_name

syy Over a year ago

Same error but now it's on json.results (undefined).

LF-DevJourney Over a year ago

you can console.log json in the processJSON function to see what it really is.

miguev Over a year ago

Actually, you shouldn't rely on json.results[0].address_components[6] being a postal_code at all. Instead, you should iterate trough all json.results[] and take the one that has postal_code in its json.results[i].types

|

Warren Mira · Accepted Answer · 2016-07-30 01:21:01Z

2

You would need to parse the data on your success function.

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

Also add an error function to your $.ajax as well

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

answered Jul 30, 2016 at 1:21

Warren Mira

2421 silver badge7 bronze badges

3 Comments

syy Over a year ago

I get this error: JSON.parse: unexpected character at line 1 column 2 of the JSON data.

syy Over a year ago

Thanks for letting me know about the error function!

Warren Mira Over a year ago

Try to see the result of the query using a chrome rest client plugin. There's a few in the chrome store. You might not be receiving a json.

Collectives™ on Stack Overflow

Reading JSON data from Google Geocoding API with jQuery

2 Answers 2

9 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related