Develop Reference

How to populate the option items from the service

I have an angular application In this I haveto populate the dropdown lsts from the backend.
.component.ts
public getMemberCodes() {
let baseUrl = `/endpoindAPI`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(actionLookupData: ActionLookupData) => {
if (actionLookupData) {
this.option1Codes = actionLookupData.Option1Codes;
this.option2Codes = actionLookupData.Option2Codes;
this.option3Codes = actionLookupData.Option3Codes;
}
},
(err) => {
console.error(err);
}
);
}
From the above service I have to populate the values of Categories from each one like this.option1Codes,this.option1Codes..etc
the response is like below:
Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]
Option2Codes: [{Category: "Category2", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]
From the above array I have to populate only Category values in dropdown lists from the backend.
.component.html
<select class="form-control" required>
<option>
//code
</option>
</select>

You can use the ngFor directive:
<select *ngFor="let optionCode of OptionCodes"> {{ link }}
I would recommend you have a look at the official documentation on the matter

If you have Only on List
Option1Codes: [{Category: "Category1", ActionStatusTypeID: 1,Complete", ActionID: 5060,…}]
Use this Way
<select *ngFor="let optionCode of Option1Codes" class="form-control" required>
<option>
{{optionCode?.Category}}
</option>
</select>
As I see You have three List option1Codes,option2Codes,option3Codes.
If you want It in one list then you have to add all list in one Array
Like this...
let list = [...option1,...option2,...option3];
<select *ngFor="let optionCode of list" class="form-control" required>
<option>
{{optionCode?.Category}}
</option>
</select>

How set selected default in Angular + 2

Created an object with the value 'true' in 'dropOptions'. In HTML I called [selected] = "option.selected" to include the selection.
The intention is to include the selected = "selected" element in the object with the value 'true'.
Thanks for help!
dropOptions = [
{ name: "ID parceiro", value: 'partner', selected: true },
{ name: "ID", value: 'id' },
{ name: "Nome do Item", value: 'name' }
];
<select (change)="selectOption($event)" [(ngModel)]="selectedOption"
class="form-control gray-txt">
<option [value]="option.value" [selected]="option.selected" *ngFor="let option of dropOptions">{{option.name}}</option>
</select>

Try:
<select (change)="selectOption($event)" [(ngModel)]="selectedOption"
class="form-control gray-txt">
<option [value]="option.value" [selected]="option.value === selectedOption" *ngFor="let option of dropOptions">{{option.name}}</option>
</select>

if you want to set default value other than dropOptions array like placeholder then do like this.
component.html
<select (change)="selectOption($event)" [(ngModel)]="selectedOption"
class="form-control gray-txt">
<option value="Select">Select</option>
<option [value]="option.value" [selected]="option.selected" *ngFor="let option of dropOptions">{{option.name}}</option>
</select>
component.ts
selectedOption = 'Select';
And if you want set default from dropOptions array then try like this
component.ts
selectedOption = 'idB2W';
this will set second item selected because we have set option value as [value]="option.value".

v-for not render any value

i use v-for to render title value with select input , but not return any value
my qcm array
[{"_id":"1","title":"test qcm "},{"_id":"2","title":"kkkk"}]
select input
<select name="qcm_list" id="qcm_list" required>
<option value> QCM</option>
<option
v-for="item in qcm"
:value="item._id"
:key="item._id"
>{{item.title}}</option>
</select>
qcm array in vue
data() {
return {
qcm:[]
}}
axios.get('url')
.then(res=>{
this.qcm=res
})

In axios, you must use res.data to get the qcm data, like this:
axios.get(url).then(res => {
this.qcm = res.data
}).catch(err => {
//handle when an error occur
})

Your JSON structure is incorrect, you're missing a " after "_id it should be:
[{"_id":"1","title":"test qcm"},{"_id":"2","title":"kkkk"}]

How can all options from a drop-down list (select) box be tested in Cypress?

How can we select all options from a normal drop-down list box and verify them using Cypress?
<select id="cars_list">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
//The below test can check only for one option, how can we verify the rest?
describe("Select all values from drop down list", function() {
it("Cypress test and verify all options", function() {
cy.visit("Https://sometestingsite.com")
cy.get('#cars_list').then(function($select){
$select.val('volvo')
})
cy.get('select').should('have.value', 'volvo')
});
});

I would suggest the test might look like this
cy.get('#cars_list option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
OR
cy.get('#cars_list').children('option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
OR
cy.get('#cars_list').find('option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
Selecting multiple child elements with cy.get(), then unwrapping them with [...options], mapping to their value with .map(o => o.value) and using a deep equal to compare arrays.
I have not tested this, so the code may need some tweaking.

Block an onChange event on a select when options are created by a v-for

<select v-on:change="WebserviceCall()">
<option v-for:="option in options">
</option>
</select>
Actually the on-change is triggered when the options are created in the v-for and i dont want this to happen, is there another semantic option or should i use a some kind of VueJSIsReady function in my javascript ?

You can use a watcher to monitor for what to do when selectedValue is changed instead.
In HTML:
<select v-model="selectedOption">
<option disabled value="">Please select one</option>
<option v-for="type in types" v-bind:value="type.value">
{{type.value}}</option>
</select>
Then in JavaScript:
data: {
selectedOption: '',
},
watch: {
selectedOption(newVal) {
// assuming all the available options are not ''
if (newVal !== '') {
// user has chosen an item
this.webServiceCall()
}
}
}

you should user vue watchers to watch selectedItem
data:{
selectedItem:'',
},
watch:{
selectedItem(){
this.callWebservice();
}
}