forgottofly forgottofly - 5 months ago 9
Javascript Question

Forming a sequence of address lists with input from multiple text boxes

I'm constructing a sequence of structured address for searching in Google maps.
I have added

ng-change
in all the text box to collect data.
The adddress follows as ..


  1. Address line1

  2. Address line2

  3. Area

  4. City

  5. State

  6. Country



So when the user starts entering in any of the field the address should construct itself as ..

Eg: "Address line1,Address line2,Area,City,Country"

HTML:

<div class="row">
<label class="label"> Address Line1</label>
<input type="text" name="addressline1" ng-change="getAddress(address)" ng-model="address.line1"/>

<label class="label"> Address Line1</label>
<input type="text" name="addressline2" ng-change="getAddress(address)" ng-model="address.line2"/>

<label class="label"> Area</label>
<input type="text" name="area" ng-change="getAddress(address)" ng-model="address.area"/>

<label class="label"> City</label>
<input type="text" name="city" ng-change="getAddress(address)" ng-model="address.city"/>

<label class="label"> State</label>
<input type="text" name="state" ng-change="getAddress(address)" ng-model="address.state"/>

<label class="label">Country</label>
<input type="text" name="country" ng-change="getAddress(address)" ng-model="address.country"/>
</div>
<div class="row">{{enteredAddress}}<?div>


Controller:

$scope.getAddresss=function (address) {
if (address.addressLine1) {
address = address.concat(',' + address.addressLine1);
} else {
address = address.addressLine1;
}
if (address.addressLine2) {
address = address.concat(',' + address.addressLine2);
} else {
address = address.addressLine2;
}
if (address.area) {
address = address.concat(',' + address.area);
} else {
address = address.area;
}
if (address.city) {
address = address.concat(',' + address.city);
} else {
address = address.city;
}
if (address.state) {
address = address.concat(',' + address.state);
} else {
address = address.state;
}
$scope.enteredAddress=address;
}


But this logic fails in multiple conditions.
Thanks

Answer

Use Array#map over Object.keys and then Array#join

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.address = {};
  $scope.enteredAddress = '';
  $scope.getAddress = function(address) {
    var address = Object.keys(address).map(function(item) {
      return address[item];
    });
    $scope.enteredAddress = address.join(', ');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
  <div class="row">
    <label class="label">Address Line1</label>
    <input type="text" name="addressline1" ng-change="getAddress(address)" ng-model="address.line1" />{{address.line1}}
    <label class="label">Address Line1</label>
    <input type="text" name="addressline2" ng-change="getAddress(address)" ng-model="address.line2" />

    <label class="label">Area</label>
    <input type="text" name="area" ng-change="getAddress(address)" ng-model="address.area" />

    <label class="label">City</label>
    <input type="text" name="city" ng-change="getAddress(address)" ng-model="address.city" />

    <label class="label">State</label>
    <input type="text" name="state" ng-change="getAddress(address)" ng-model="address.state" />

    <label class="label">Country</label>
    <input type="text" name="country" ng-change="getAddress(address)" ng-model="address.country" />
  </div>
  <div class="row">{{enteredAddress}}</div>


</div>