title: Reading JSON data from Google Geocoding API with jQuery
body: <p>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:</p>
  
  <pre><code>{
     "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"
  }
  </code></pre>
  
  <p>I get this response with this code: </p>
  
  <pre><code>$("#submit").click(function(event) {
    var address = encodeURIComponent($("#location").val());
  
    $.ajax({
      type: "GET",
      url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&amp;sensor=false&amp;key=" + API_KEY,
      dataType: "json",
      success: processJSON
    });
  
    function processJSON(json) {
      // Do stuff here
    }
  });
  </code></pre>
  
  <p>The problem is I don't know what to put inside <code>processJSON</code>. I was reading the tutorial here: <a href="https://www.sitepoint.com/ajaxjquery-getjson-simple-example/" rel="nofollow">https://www.sitepoint.com/ajaxjquery-getjson-simple-example/</a> and the documentation on <code>.getJSON()</code> on <a href="http://api.jquery.com/jquery.getjson/" rel="nofollow">http://api.jquery.com/jquery.getjson/</a>. However, I'm having trouble understanding both sites.</p>
  
  <p>If I wanted to get the <code>postal_code</code>, how would I do read the data? I tried this:</p>
  
  <pre><code>function processJSON(json) {
      // Do stuff here
      alert("Postal Code:" + json.address_components[6].long_name);
    }
  </code></pre>
  
  <p>I tried it with <code>getJSON()</code> as well after <code>success</code>:</p>
  
  <pre><code>$.getJSON(url, function(json) {
    alert("Postal Code:" + json.address_components[6].long_name);
   });
  </code></pre>
  
  <p>However, neither alert anything. What am I doing wrong? Thanks in advance!</p>