$.each - Handy for sorting through JSON's

So you have just had whole JSON dumped on you by some API service. Now what?

I imagine that you would want to sort through the data. But, lets be honest, that seems like a real daunting task when the little JSON returned looks like this;

{
   "results" : [
      {
         "access_points" : [],
         "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 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 Pkwy, Mountain View, CA 94043, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.4223097,
               "lng" : -122.0846245
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.4236586802915,
                  "lng" : -122.0832755197085
               },
               "southwest" : {
                  "lat" : 37.4209607197085,
                  "lng" : -122.0859734802915
               }
            }
         },
         "place_id" : "ChIJtYuu0V25j4ARwu5e4wwRYgE",
         "plus_code" : {
            "compound_code" : "CWC8+W5 Mountain View, California, United States",
            "global_code" : "849VCWC8+W5"
         },
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

Fear not!!! jQuery to the rescue.

Let us assume that the data was returned to a data object. The following code would then be quite nifty;

$.each(data["results"][0]["address_components"], function (key, value){
                    if(value["types"][0] == "country") {
                        return(value["short_name"]);
                    }

The above would return "US" from the Object.

So how does it break down???

The $.each method loops through all DOM elements that is part of the jQuery object associated to the call. Now, bear in mind, this can be unordered lists, ordered lists, arrays, objects, etc.

In our case, $.each will loop through the elements located in the data object at ["results"][0]["address_components"]. In other words, this little piece;

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

Now we can just write an if statement that checks the values for each of the "types[0]" elements, and if we find the "country" value, we can return the associated value of the "short_name" key.

Easy, hey?