CODEWITHSUNDEEP
javascriptjqueryarraysgoogle-mapsconcatenation
sixtwowaifu
sixtwowaifu

Reputation: 797

Concatenate two values from an object

I am building a place autocomplete address form like the demo seen here https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

However in the demo the street number and street name are put into separated fields. What I want to do is concatenate those two values which are street_number: 'short_name' and route: 'long_name' and put them into a new field.

I'm trying to find where in the code those values are being stored and I see this array

var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_code: 'short_name'
};

So if I do console.log(componentForm); it returns the whole thing. So I tried console.log(componentForm[route]); but the console says route is undefined

So my question is, how can I find value for street number and street name, then concatenate them into a new field in the form?

Posting my full script code, as it's slightly modified (I removed the geocode service and restricted suggestions to US addresses only, and also added the state county as one of the returned values)

// load google api
var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_code: 'short_name'
};

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to US locations
    var input = document.getElementById('autocomplete');
    var options = {
        componentRestrictions: {
            country: 'us'
        }
    };

    autocomplete = new google.maps.places.Autocomplete(input, options);

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        $(".autoSearch").hide(1000);
        $(".hiddenForm").show(1000);
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];

        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];

            document.getElementById(addressType).value = val;

        }
    }
}

Upvotes: 0

Views: 252

Answers (1)

Sacha
Sacha

Reputation: 245

When you write componentForm[route] javascript will look for the route variable and use its content as the name of the property of the componentForm object, there is no route variable so javascript is telling you that it is undefined.

If you want to access the route property you should do this componentForm["route"] or this componentForm.route , to create this new field you should add a line like this:

componentForm.full_address = componentForm.route + " " + componentForm.street_number;

Upvotes: 1

Related Questions