Vue.js How to Access Elements of an Object - javascript

I have an array of objects:
data: function() {
return {
customers:[],
}
},
that populates this select box:
<label>DSO Affiliation:</label>
<select class="select-box form-control" name="customer" id="customer" v-model='customer_id' style="-webkit-appearance: none;">
<option value="" selected>Choose Customer</option>
<option v-for="customer in customers" :value="customer.id">
{{ customer.customer_name }}
</option>
</select>
Once a customer is selected I need to get the customer data from the selected object so that I can populate other form elements such as:
<label>Customer Address:</label>
<input type="text" class="form-control" name="cust_address" v-model='cust_address'>
I have the data in the customers:[ ] array. How do I get the customer data that was was selected in the select box without an additional trip to the server?

Watch the customer_id and update cust_address by filtering the customers array :
data: function() {
return {
customers:[],
}
},
watch:{
customer_id(val){
let found=this.customers.find(cust=>cust.id===val);
this.cust_address=found?found.address:'';
}
}

Related

Pls Advice for Multi select dependent dropdown to display in Select box

The multiselect dependent dropdown code below works perfectly. The issue is that I need this to be displayed in a "Select Option Box," similar to a Pillbox, and when the user clicks on it, it should show a value option in a dropdown from which the user can choose a value from Country and State ..
Need this to be displayed and work like a "Select Option Box," similar to this Example - ( Multiselect → Basic example) Link → https://mdbootstrap.com/docs/standard/extended/multiselect/#example2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
<label for="country">Country</label>
<select class="form-control" id="country" name="country[]" required="required" multiple>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
</select>
<label for="state">State</label>
<select id="state" name="state[]" class="form-control" required="required" multiple>
<option disabled>Select Country First</option>
</select>
</form>
<script>
$(function() {
//Populate an Object: { Country: [ States... ] }
var states = {};
states['USA'] = new Array('Alabama', 'Alaska', 'Arizona', 'Other');
states['UK'] = new Array('Aberdeenshire', 'Angus', 'Antrim', 'Other');
states['Canada'] = new Array('Alberta', 'British-Columbia', 'Manitoba', 'Other');
$("#country").change(function() {
// Array Variable to contain all selected
var selected = [];
// Iterate all selected items
$.each($(this).val(), function(i, country) {
selected = selected.concat(states[country]);
});
// Remove previous options
$("#state > option").remove();
if (selected.length === 0) {
// Add placeholder and Stop
$("#state").append("<option disabled>Select Country First</option>");
return false;
}
selected.sort();
// Populate Options
$.each(selected, function(i, state) {
$("<option>").html(state).appendTo("#state");
});
});
});
</script>

Get input text value, after selected an option (all from a json file), ANGULAR 10

Basically I have this selection with some input fields:
<div class="form-row">
<div class="form-group col-lg-6">
<label>Città*</label>
<select formControlName='cittaLegale' class="form-control" id="citta_legale"
name="citta_legale" required>
<option value="" disabled selected> Scegli </option>
<option *ngFor="let comune of comuni" value="" > {{comune.Comune}}</option>
</select>
</div>
<div class="form-group col-lg-4">
<label>Provincia*</label>
<input formControlName='provinciaLegale' type="text" class="form-control"
id="provincia_legale" name="provincia_legale"
placeholder="Es.RM" value='' required maxlength="2" style="text-
transform:uppercase" >
</div>
So I did a ngFor to get all Comune from a JSON file and I need to autocomplete the input provinciaLegale (Provincia) based on I choosing the select.
This is my function to get JSON file:
listaComuni(){
this.http.get("assets/it.json").subscribe(data=>{
this.comuni = data;
})
and this is part of the JSON file:
[
{
"Istat": "028001",
"Comune": "Abano Terme",
"Provincia": "PD",
"Regione": "VEN",
"Prefisso": "049",
"CAP": 35031,
"CodFisco": "A001",
"Abitanti": 19726,
},
]
So you want to select the option and set it's value to the ProvinciaLegale input?
You could add a valueChanges hook (inside your ngOnInit()) to cittaLegale select formControl, like this:
this.formGroup.get('cittaLegale').valueChanges.subscribe(newValue => {
this.formGroup.get('provinciaLegale').setValue(newValue);
});

Access value of option in select and pass it to function - Angular 5

I have an angularForm and a combobox which is filled with options from the database. I need to get the selected option and pass it to a function on button click
<div class="form-group">
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>
</div>
<div class="form-group">
<button (click)="addFeature(name.value, description.value,product.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>
When I click the button and console.log product.value I get [object,object], how to fix this?
addFeature(name, description, product) {
console.log(product);
// this.featureservice.addFeature(name, description,product);
// this.router.navigate(['/features/index']);
// location.reload();
}
UPDATE
The values in the combobox are filled by:
ngOnInit() {
this.getProducts();
}
getProducts() {
this.productservice.getProducts().subscribe(res => {
this.products = res;
})
}
You are getting the whole object, if you need name or description , access it as
addFeature(name, description, product) {
console.log(product.name);
}
EDIT
You can use ngModel and access the variable directly
<select class="form-control" [(ngModel)]="selectedProduct" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>
and you can access it as,
addFeature() {
console.log(this.selectedProduct);
}
Bind to ngValue instead value of the option tag:
<div class="form-group">
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
</select>
</div>
See Differences between value and ngValue in Angular 5 for more info.
I don't get your doubt precisely but try to change your select tag to something like so:
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product.value'
{{product.name}}
</option>
</select>
I found the solution myself
<select class="form-control" [(ngModel)]='selectedOption' formControlName="product" #product>
<option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
</select>
<button (click)="addFeature(name.value, description.value,selectedOption.name)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>

VueJS Select Box Not Reacting When Dynamically Populated

I need to set the status select box to the value of customer.lStatus. However,
the select box does not get updated with a value, unless I manually write the
HTML beforehand. Wha?
Script
<script>
// ...
data () {
return {
customer: {
dLastUpdate: '2016-02-17 15:07:06',
lKey: '1007',
lLastUpdateBy: '1000',
lStatus: '100015',
sName: 'TestAgain'
},
statuses: [
[100013, 'Active'],
[100015, 'Deactivated'],
[100012, 'On Hold'],
[100014, 'On Notice'],
[100011, 'Pending']
]
};
},
// ...
</script>
Does not work
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" value="status[0]">{{status[1]}}</option>
</select>
Works
<select class="form-control" v-model="customer.lStatus">
<option value="100013">Active</option>
<option value="100015">Deactivated</option>
<option value="100012">On Hold</option>
<option value="100014">On Notice</option>
<option value="100011">Pending</option>
</select>
You are missing a colon in the value attribute.
Try:
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" :value="status[0]">{{status[1]}}</option>
</select>

How to select an option from javascript/angularjs

How can I select the <select> tag option from the javascript/Angularjs backend.
Hint: I actually get data from API service, then I fill into a form to make them available for edit. Assume the gender is Male, how can I make the <select> tage becomes Male as it is in databse. So user can update it to Female for example.
Here is my codes:
$scope.Gender = [
{ GenderID: "Mmale", name: "Mmale" },
{ GenderID: "Female", name: "Female" }
];
//Assigning data to select tag. But this did not work for me:
$scope.Gender.name = $scope.users[id].Gender;
$scope.Gender.GenderID = $scope.users[id].Gender;
<select class="form-control" name="Gender" ng-model="GenderID" ng-options="g.GenderID as g.name for g in Gender" required style="width:98px; color:gray">
<option value="" style="" >Gender?</option>
</select>
<input type="button" value="SelectMale()">
Did you mean something like this:
$scope.selectMale = function() {
$scope.GenderId = "Mmale";
}
Working plunker.
if you want to see the selected value you can use ng-change write the code as:
<select class="form-control" name="Gender" ng-model="GenderID" ng-options="g.GenderID as g.name for g in Gender" ng-change="Selectmale(g.GenderID)" required style="width:98px; color:gray">
<option value="" style="" ></option>
</select>
$scope.Selectmale=function(genderId){
console.log(genderId) //this will return the current genderId
}

Categories