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 — TobiasR.
– TobiasR., Commented Feb 1, 2018 at 17:25
So what gets returned when you access political since more than one object has it in its types list? — user9274775
– user9274775, Commented Feb 1, 2018 at 17:28
developers.google.com/maps/documentation/javascript/examples/… — geocodezip
– geocodezip, Commented Feb 1, 2018 at 17:34

castletheperson · Accepted Answer · 2018-02-01 17:22:00Z

1

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;
  // ...
}

answered Feb 1, 2018 at 17:22

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Wilson · Accepted Answer · 2018-02-01 17:13:33Z

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 1, 2018 at 17:13

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

2 Comments

user9274775 Over a year ago

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.

Ryan Wilson Over a year ago

@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.

Collectives™ on Stack Overflow

Get a specific element out of an array in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related