Ionic / Angular JS - Get specific values ​​from reverse geolocation

Question

I am building an application using Ionic / Angular JS. On a specific tab, the application can automatically fill out form fields such as street name, street number, etc. My problem is that in some situations the street number, for example, is not available, and data[0].address_components[0].long_name fills in the Street Name instead.

Here is the code I'm using:

 .controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile, Upload) { $scope.getLocation = function() { $ionicLoading.show({ templateUrl: 'loading.html', hideOnStateChange: true }); var posOptions = {timeout: 15000, enableHighAccuracy: true}; $cordovaGeolocation .getCurrentPosition(posOptions) .then(function (position) { $scope.lat = position.coords.latitude; $scope.lng = position.coords.longitude; $scope.pLat = {value: $scope.lat}; $scope.pLng = {value: $scope.lng}; var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng($scope.lat, $scope.lng); var request = { latLng: latlng }; geocoder.geocode(request, function(data, status) { if (status == google.maps.GeocoderStatus.OK) { if (data[0] != null) { $scope.$apply(function () { $scope.pStreet = {value: data[0].address_components[1].long_name}; $scope.pNumber = {value: data[0].address_components[0].long_name}; $scope.pCity = {value: data[0].address_components[2].long_name}; $scope.pAddress = {value: data[0].formatted_address}; setTimeout(function () { $ionicLoading.hide(); }, 500); }); } else { $log.log("Adresa indisponibila"); setTimeout(function () { $ionicLoading.hide(); }, 500); } } }) }); }; }) 

Here is an example response from Google:

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

How can I change my code, so it checks the "types" value before reading the value and leaves it empty if it is not available. To be more speicifc, instead of using data[0].address_components[0].long_name to get the street number, I would like to get if "types" vale is "street_number" .

Answer 1

I realized that if the value of the types is street_number , you want to get the value, otherwise you want to put it empty as the value. ''

 geocoder.geocode(request, function(data, status) { if (status == google.maps.GeocoderStatus.OK) { if (data[0] != null) { $scope.$apply(function () { $scope.pStreet = {value: data[0].address_components[1].long_name}; $scope.pNumber = {value: data[0].address_components[0].types[0] === 'street_number' ? data[0].address_components[0].long_name : ''}; $scope.pCity = {value: data[0].address_components[2].long_name}; $scope.pAddress = {value: data[0].formatted_address}; setTimeout(function () { $ionicLoading.hide(); }, 500); }); } else { $log.log("Adresa indisponibila"); setTimeout(function () { $ionicLoading.hide(); }, 500); } } }) 

Answer 2

You need to iterate over the result set to find a match:

 Angular.forEach(data[0].address_components, function(val, index){ if (val.type[0]=='street_number') { $scope.pNumber = {value: val.long_name}; } }); 

You can use this code to find any other value, such as city or country , etc.

Answer 3

Ryad.iv's answer just checks the first line in the array. For proper operation you need to check all the elements of the array.

 geocoder.geocode(request, function(data, status) { if (status == google.maps.GeocoderStatus.OK) { if (data[0] != null) { $scope.$apply(function () { $scope.pStreet = {value: data[0].address_components[1].long_name}; $scope.pNumber = {value: data[0].address_components[0].types.indexOf('street_number') !== -1 ? data[0].address_components[0].long_name : ''}; $scope.pCity = {value: data[0].address_components[2].long_name}; $scope.pAddress = {value: data[0].formatted_address}; setTimeout(function () { $ionicLoading.hide(); }, 500); }); } else { $log.log("Adresa indisponibila"); setTimeout(function () { $ionicLoading.hide(); }, 500); } } }) 

This is a good way to test it. With a different answer, if street_name is the second position of the array, you will not correctly insert it.

Hope this helps