how to extract address,city,state form response about ngx-google-places-autocomplete HOT 6 CLOSED

This probably very US centric so mileage may vary, but I think this should be a method or helper methods added to the places' Address object. Something straightforward like getUSBasedAddress() would go a long way to simplifying things. Here is what I'm doing:

    import { Address as gAddress} from "ngx-google-places-autocomplete/objects/address";
    import { AddressComponent as gAddressComponent } from "ngx-google-places-autocomplete/objects/addressComponent";
    
    public static fromGooglePlace( addr : gAddress ) : Address {
       let address = new Address();
       let houseNumber = Address.findType(addr,"street_number");
       let street = Address.findType( addr, "route");

       address.street = street && houseNumber ? `${houseNumber} ${street}` : null;
       address.street = address.street ? address.street : street;

       address.city = Address.findType(addr, "locality");
       address.state = Address.findType(addr, "administrative_area_level_1");
       address.zipcode = Address.findType( addr, "postal_code" );

       address.validated = houseNumber != null && street  != null && address.city  != null && address.state  != null && address.zipcode != null;

       return address;
     }

    private static findType( addr : gAddress, type : string ) : string {
        let comp : gAddressComponent = addr.address_components.find((item : gAddressComponent) => item.types.indexOf(type) >= 0);
        return comp ? comp.short_name : null;
    }

I had to create an alias for the Address object in the places library from my own version of Address. So gAddress is places' Address object. I think the findType() method would be a great candidate to be provided by gAddress since it's so universal.

from ngx-google-places-autocomplete.

I have this function [handleAddressChange(event)] and how to call your function [public static fromGooglePlace( addr : gAddress ) : Address {}]

My function

handleAddressChange(event){
let address;
this.lng = event.geometry.location.lng();
this.lat = event.geometry.location.lat();
address = fromGooglePlace(event);
}

from ngx-google-places-autocomplete.

@chubbard plz check it.
//Map address
lat:any = [];
lng:any = [];
houseNumber:string ='';
street:string = '';
mapPaostalCode:number =0;
mapAddress:any={};
mapCity:string='';
mapcountry:string='';
mapState:string = '';
mapUserAddress:string='';

handleAddressChange(event)
{

   console.log(event);
    this.lat = event.geometry.location.lat();
    this.lng = event.geometry.location.lng();
    this.fulladdress = event.formatted_address;
    for(let i=1; i<event.address_components.length;i++)
    {
        this.mapAddress = event.address_components[i];
        if(this.mapAddress.long_name !=''){

            if(this.mapAddress.types[0] =="street_number"){
                this.houseNumber = this.mapAddress.long_name;
            }else{
                this.houseNumber ='';
            }
            if(this.mapAddress.types[0] =="route"){
                this.street = this.mapAddress.long_name;
            }else
            {
                this.street ='';
            }

            if(this.mapAddress.types[0] =="locality"){
                this.mapCity  = this.mapAddress.long_name;
            }else
            {
                this.mapCity ='';
            }
            if(this.mapAddress.types[0] =="administrative_area_level_1"){
                this.mapState = this.mapAddress.long_name;
            }else
            {
                this.mapState ='';
            }
            if(this.mapAddress.types[0] =="country"){
                this.mapcountry = this.mapAddress.long_name;
            }
            else
            {
                this.mapcountry ='';
            }
            if(this.mapAddress.types[0] =="postal_code"){
                //this.mapPaostalCode  = this.mapAddress.long_name+',';
            }
            else
            {
               // this.mapPaostalCode ='';
            }
            let streets = this.street && this.houseNumber ?(this.houseNumber+', '+this.street):'';
            this.mapAddress = streets ? streets : this.street;
        }

    }
    console.log(this.mapAddress);
    console.log(this.mapCity);
    console.log(this.mapState);
    console.log(this.mapcountry);
}

from ngx-google-places-autocomplete.

I think your function will be brittle because it uses this.mapAddress.types[0] to compare against. If the type you are looking for isn't in the first position then it won't find it even though it could've been given to you. Also, it could break if Google changes the order of those types it gives back. So it might work today, but in the future if it shifts out of the first position it'll break. That's why I was using a method like helper function findType() to abstract that out so it was simple to look for types in a robust manner. Also let i = 1 should be let i = 0.

I also wouldn't use this.mapAddress as the iterator. You just need a local variable to iterate over the components so I'd convert that to a local variable. And in the future never re-use a variable for another purpose. Re-assigning this.mapAddress at the end like will create untold defects if you aren't very careful then even if you are careful the next guy won't be and it'll break like all hell. That assignment
and let streets should be moved outside of your for loop. Do it once and only once. Plus those if / else will overwrite this.mapAddress so that code isn't going to work. This proves my point exactly about not re-using that variable because you have to very careful not to screw it up. You don't need the else statements inside the loop.

And I noticed some typos like mapPaostalCode, and this isn't defined this.fulladdress. It works because Javascript isn't strict, but FYI.

from ngx-google-places-autocomplete.

@chubbard, Thanks for your code snippet. Looks good, i will also try that out. But where do i place this code? Did you place it in the same file where one is using the ngx-google-places-autocomplete?

from ngx-google-places-autocomplete.

Hi @P-PATHAK ,
I think you should use address_components https://db.tt/rhjHi8itCi

Here is an example of lookup function

    public getComponentByType(address: Address, type: string): AddressComponent {
        if(!type)
            return null;

        if (!address || !address.address_components || address.address_components.length == 0)
            return null;

        type = type.toLowerCase();

        for (let comp of address.address_components) {
            if(!comp.types || comp.types.length == 0)
                continue;

            if(comp.types.findIndex(x => x.toLowerCase() == type) > -1)
                return comp;
        }

        return null;
    }

And usage example
let x = this.getComponentByType(address,"street_number");

from ngx-google-places-autocomplete.