How to access nested information in JSON object from API response?

1

I am working on the weather app right now. I am stuck at the part where I have to show the current location. I am able to get the browsers coordinates, and then access and receive information from the Google Geolocation API, and store that information in a variable. So far I have this object successfully stored as a variable that I hope to use:

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

** note: I don’t have this information exactly, I actually have the information for my location stored as an object, I just don’t want to share my address :slight_smile:

So my question is: how do I access something like the long name under locality? I have tried something like this:

x.innerHTML = locObj.results[0].address_components[2].long_name;

but all I get in response is an empty string. Can someone tell me what I am doing wrong? Or can I not access these parts of the object like this for some reason?

Thank you!

2

try find out more about json parse

3

because there are strings involved, I would stick to using the bracket notation, which might be your problem. Also, and I can’t confirm this, it might be a problem that you’re mixing bracket and dot notation within a single line.

If nothing else, a good way to debug is to strip your call down to where you are sure you are getting something. Trying calling localObj[results][0] and see what you get. If it’s what you expect, then chain in the next call and do localObj[results][0][address_components] and so on. Eventually, you’ll see where you’re going wrong and will be able to fix it from there. I see you caught the [0] after results, but maybe there is another shallow array or object you overlooked?

Anyway, I think sticking to bracket notation would fix your problem.

4

this worked, thank you! :relieved: