Develop Reference

how to pass the key as select option value from v-for when changed (VueJS)

I'm working with Vue 3 and Bootstrap 5.
I have a select with multiple options. Now I'm displaying my option.TEXT and this value will also be passed into my methods when I change something. But I want to pass the key (option.ID) when I change something.
But I also want my v-model to be my option.ID but displaying my option.TEXT.
How can I achieve this without checking it in the methods itself.
SELECT:
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID">
{{ option.TEXT }}
</option>
</select>
OPTIONS ARRAY:
[
{ "ID": 1,
"TEXT": "One"
},
{ "ID": 2,
"TEXT": "Two"
},
{ "ID": 3,
"TEXT": "Three"
},
]

The option attribute value should be bound to the option.ID :
<select class="form-select" v-model="value" #change="get_key()">
<option v-for="option in options" :key="option.ID" :value="option.ID">
{{ option.TEXT }}
</option>
</select>

How to use map on an array of objects

Using this data set to listData state in React:
[
{
"Key": "Anchorage TAC 82.tif",
"LastModified": "2019-04-07T03:25:51.000Z",
"ETag": "\"9f904f2219d1edf3fa39b171c98de924-6\"",
"Size": 28135199,
"StorageClass": "STANDARD"
},
{
"Key": "CSA-L01.pdf",
"LastModified": "2019-04-07T03:25:36.000Z",
"ETag": "\"90f166238ae6b1f64120e984be743ba4\"",
"Size": 3406742,
"StorageClass": "STANDARD"
}
]
How can I map the Key values into a drop downlist. I've tried:
<select>
<option>Please select a file:</option>
{Object.keys(this.state.listData).map(val =>
<option value={val.Key}>{val.Key}</option>) }
</select>
and it's not working. I'm getting a blank drop down list.

listData is an array and Object.keys(this.state.listData) will return array of indexes [0,1,2..].You need to remove Object.keys() and apply map() directly on listData
<select>
<option>Please select a file:</option>
{
this.state.listData.map(val =>(
<option value={val.Key}>{val.Key}</option>
)
}
</select>

How to select json items base on their parent in vue.js

I'd like to have two select boxes for users to mention their location data.
When user chooses the province Bar from the first select box, the second selct box should be populated with the cities of the province:
Here is the json data:
Provinces: [
{
"Province": "Foo",
"Cities": [
{
"name": "Fooland"
},
{
"name": "Fooville"
}
} ,
{"Province": "Bar",
"Cities": [
{
"name": "Barland"
},
{
"name": "Barville"
},
{
"name": "Barak"
}
}
]
The province select box works fine:
<select v-model="province">
<option v-for="(p, index) in provinces" :key="index" >{{ p.Province }}</option>
selected: {{province}},
</select>
But I can not get the cities of Bar in the second select box:
<select v-model="city">
<option v-for="(c, index) in provinces.province.Cities" :key="index">{{ c.name }}</option>
</select>
Appreciate your hints on how to fix this?

TLDR: Change the first <select>'s value to be the selected province object (which contains Cities), and use that value to populate the second <select>'s options.
The value of <select> is the value of the selected <option>. if you don't explicitly specify a value for an <option>, the default value is the <option>s inner text (standard behavior). So, you can assign a value that is different from the <option> label, and the value can be an object:
<option :value="myOptionValue">My Option Label</option>
Thus, you can assign the underlying province object model (i.e., p in this case) to the <option>s in the provinces <select>:
<option :value="p" v-for="(p, index) in provinces">
Notice the :value="p", where p is the province object, containing Cities.
After selecting the province, province can be used in the cities <select> to populate its <options> with city names:
<select v-model="city">
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
const Provinces = [
{
"Province": "Foo",
"Cities": [
{ "name": "Fooland" },
{ "name": "Fooville" }
]
},
{
"Province": "Bar",
"Cities": [
{ "name": "Barland" },
{ "name": "Barville" },
{ "name": "Barak" }
]
}
];
new Vue({
el: '#app',
data() {
return {
province: '',
city: '',
provinces: Provinces
}
},
watch: {
province(newValue) {
// reset city when province changes
this.city = '';
}
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<select v-model="province">
<option value="" disabled>Select province</option>
<option v-for="(p, index) in provinces" :value="p" :key="index">{{ p.Province }}</option>
</select>
<select v-model="city" :disabled="!province">
<option value="" disabled>Select city</option>
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
</div>

Cascading dropdowns with AngularJs with Select Distinct

I have a page on which I output a list of Cars. The results in this list are coming from a Json file.
This is an example of my Json:
[
{
"id": "1590",
"brand": "Peugeot",
"type": "508"
},
{
"id": "1591",
"brand": "Peugeot",
"type": "308"
},
{
"id": "1594",
"brand": "Honda",
"type": "Civic"
},
{
"id": "1605",
"brand": "Renault",
"type": "Clio"
},
{
"id": "1607",
"brand": "Renault",
"type": "Laguna"
}
]
I need to filter the results by e.g. Brand and Type. So I have two DropDown lists named 'selectedBrand' and 'selectedType'.
I used this markup to load the single Brands into the DropDown list:
<select id="brands" data-ng-model="selectedBrand" data-ng-options="car.brand for car in cars | unique:'brand' | orderBy:'brand'">
</select>
This works okay and gives me a DropDown list with the unique brands, like a DISTINCT SELECT.
Now I want the second DropDown list to be filtered when the first one has a selected value.
This is the markup I have for the second DropDown list:
<select id="type" data-ng-model="selectedType" data-ng-options="car.type for car in cars | filter:{brand:selectedBrand} | unique:'type' | orderBy:'type'">
</select>
But this is not working. It shows the complete list with types of every brand.
I guess I need some way to trigger it when the first DropDown list changes?
I pretty new to AngularJs, so any help would be appreciated.
I don't know if this is the best way to get those DISTINCT values out of the Json results. I only have this complete Json result set with all the data and that is what I have to work with.

Following the docs you'll need a ng-model-options="{ updateOn: 'your option here' }" to do this bind

ng-repeat not working when given a dynamic index in an array

I have this array in $scope.types (example data) :
[
{
"id": 1,
"description": "Cat",
"property_type": [
{
"id": 1,
"description": "Nickname",
},
{
"id": 2,
"description": "Age",
},
{
"id": 3,
"description": "Color",
}
]
}
]
I want to populate a ng-repeat with the properties of the type. Here's what I did :
<div ng-repeat="property in types[parseInt($('#select_type').val())].property_type">
{{property.description}}
</div>
This code doesn't show anything. However, if I replace $('#select_type').val() with 0, which is the offset of the object in the array, it works. What I don't understand is that if I look in the console what's the value of $('#select_type').val(), I get "0"... so it should work, unless there's something I don't get right with Angular (which is probably the case here).
If it can help, here's my select :
<select ng-options="type.id as type.description for type in types" ng-model="current_data.object_type_id" id="select_type">
<!-- Generated by ng-options, not hardcoded -->
<option value="0" selected="selected">Cat</option>
<option value="1">Dog</option>
</select>
Have any idea?

Try to use the following code:
<div ng-repeat="property in current_data.property_type">
{{property.description}}
</div>
<select ng-options="type.description for type in types" ng-model="current_data" id="select_type">
<option value="">select</option>
</select>

Try this on your ng-repeat
<div ng-repeat="property in types[current_data.object_type_id].property_type">
{{property_type.description}}
</div>