Get a specific element out of an array in javascript

Question

I try to implement google-maps with geocoding to my website and its working so far.

My problem is that I get the address components from google maps back in an array.

Here is an example how the array I get back is built:

    {
   "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 write the "response array" in a variable like that:

var addressComponents = response.data.results[0].address_components;

But what I would like to do is, for example, write only the street name in a variable, like:

var streetname = response.data.results[0].address_components.street_number.long_name;

Is there a simple way to do that? I made it happen to get to the information by a loop and write it in to variables. The problem is then, that sometimes there is a street number and sometimes not. So it is not clear which piece of information goes into which variable.

Thank you for your help

Possible duplicate of [Find a value in an array of objects in Javascript](https://stackoverflow.com/questions/12462318/find-a-value-in-an-array-of-objects-in-javascript) — TobiasR., Feb 01 '18 at 17:25
So what gets returned when you access `political` since more than one object has it in its `types` list? — , Feb 01 '18 at 17:28
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform — geocodezip, Feb 01 '18 at 17:34

score 1 · Accepted Answer · answered Feb 01 '18 at 17:22

You can use Array.prototype.find to find the component with the "route" type, and then access the long_name property if the component was found. This will give you the street name.

var addressComponents = response.data.results[0].address_components;
var streetNameComponent = addressComponents.find(function (comp) {
   return comp.types[0] === "route";
});
if (streetNameComponent !== undefined) {
  var streetName = streetNameComponent.long_name;
  // ...
}

score 0 · Answer 2 · answered Feb 01 '18 at 17:13

0

What you are being returned is JSON, you can parse this using JSON.parse() and place that into an array. Then you can iterate each object in the array and use the properties of the objects to get the data you want, since it sounds like you want only the street, I would iterate then the address_components property of the parsed json string and then look for the object which has property types with a value of "route" and then grab that objects long name property value.

answered Feb 01 '18 at 17:13

Ryan Wilson

10,223
2
21
40

I don't think that parsing is the issue here, since the OP doesn't seem to have errors with the current way they're accessing `address_components`. – Feb 01 '18 at 17:14
@Skinny Pete, you maybe correct sir, just thought I'd add the JSON.parse portion so as to give a complete and full answer. From the question, I can't tell if the OP even knows what he is being returned or what JSON is to begin with. – Ryan Wilson Feb 01 '18 at 17:18

Get a specific element out of an array in javascript

2 Answers2