Parse JSON data using jQuery.getJSON()

In this post I am going to explain, how we can parse a JSON data which we will get here using one of the jQuery Ajax shorthand method – $.getJSON(). Basically, the $.getJSON() method loads the JSON-encoded data from the server using a GET HTTP request based on a URL to which the request is sent. It also has a callback function which is executed if the request succeeds. The returned data passed to the callback function is typically a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method. So, we don’t need to worry about if the data returned from the server is an integer, string or else, since it’s always a JSON-encoded data.

Now, lets see an example to make things more clear. For this, I am going to use a URL from the Google Geocoding API. This API is mainly used for the Geocoding purpose, which is the process of converting addresses into geographic coordinates, which you can use to place markers or position the map. And the URL is:

http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true

If we open this URL in a new browser window and hit enter, we will see that a JSON-encoded data is returned from the server.

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Parkway",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara",
               "short_name" : "Santa Clara",
               "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.42141110,
               "lng" : -122.08403720
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.42276008029150,
                  "lng" : -122.0826882197085
               },
               "southwest" : {
                  "lat" : 37.42006211970850,
                  "lng" : -122.0853861802915
               }
            }
         },
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

Now, we will primarily focus here on getting the values for the keys: formatted_address, lat and lng. Where,

• formatted_address is a string containing the human-readable address of this location.
• lat is the geocoded latitude value.
• lng is the geocoded longitude value.

Now, we can get these values using jQuery like this:

var geocodingAPI = "http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true";

$.getJSON(geocodingAPI, function (json) {
    var address = json.results[0].formatted_address;
    console.log('Address : ', address);

    var latitude = json.results[0].geometry.location.lat;
    console.log('Latitude : ', latitude);

    var longitude = json.results[0].geometry.location.lng;
    console.log('Longitude : ', longitude);
});

Explanation:

1. Code in the first line

   var geocodingAPI = "http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true";
   

   Here, in the above code, we are setting the URL string as a global variable geocodingAPI.

2. Code in the third line

   $.getJSON(geocodingAPI, function (json) {
   

   In the above code, we are calling the $.getJSON Ajax method and passing the geocodingAPI url string containing the URL to which the request is sent to the server. On successful execution, a JSON-encoded data is returned from the server as variable named json here.

3. Code in the fourth and the fifth line

   var address = json.results[0].formatted_address;
   console.log('Address : ', address);
   

   The Google Geocoding API returns results and it places them within a (JSON) results array. Now, we can get the results array using the JavaScript Object dot notation like json.results, where results is the key of the json object returned. This will return all the objects in the array but since the results array has only one object, we can just do this json.results[0] and it will return the first object in the array.

   Again, using the Object dot notation, we can get the formatted_address key value like json.results[0].formatted_address. Now, using the code in the next line console.log('Address : ', address);, we can check in the browser console what value we are getting. If you open your browser console, you will be able to see the value like this:

   Address :  1600 Amphitheatre Parkway, Mountain View, CA 94043, USA
   

   F.Y.I. The above is the address of Googleplex, the corporate headquarters complex of Google.

4. Code in the next few lines

   var latitude = json.results[0].geometry.location.lat;
   console.log('Latitude : ', latitude);
   
   var longitude = json.results[0].geometry.location.lng;
   console.log('Longitude : ', longitude);
   

   Now that we are bit familiar with the JavaScript Object dot notation, you probably have figured out by now, what will be the output of the above code and what it does. But, in case you have not, let me explain. Since the lat key is nested within the location object, which again is nested within the geometry object, we will have to use the json.results[0].geometry code first to get the geometry object and then the json.results[0].geometry.location code to get the location object.

   And finally we will use the json.results[0].geometry.location.lat code to get the lat key value and similarly we will get the lng key value too. Again, if you open your browser console, you will be able to see the values like this:

   Latitude :  37.4214111
   Longitude :  -122.0840372
   

Demo:

• Working Demo on jsFiddle #1
  ( For full screen result, open this. In this fiddle, I have parsed the JSON data and set the results as the table cells text. I have also provided the URL, so that you can click it and see the JSON encoded result in a new window. )
• Working Demo on jsFiddle #2
  ( In case, you are bit more interested to see the code, open this. )

That’s it. 🙂 Hope, I have been able to make things clear. If you have any comments or suggestion or any queries about this post please add it in comments section. I would really appreciate it.

Happy Coding 🙂