Using object as Vue Select options - javascript

I know, Vue Select docs specify that options should be an array, but is there a way around it? I want to use object keys as values and object values as labels.
My data:
obj: {
value: 'en',
options: {
'ar': 'Arabic',
'ast': 'Asturian',
'en':' English'
}
}
<v-select
v-model="obj.value"
:options="Object.keys(obj.options)"
>
I know i can use keys as options that way, but I have no idea how to use values as labels. Any tips?

There are multiple ways you could do that but one options is:
<v-select v-model="obj.value" :options="obj.options" :reduce="val => val.code"/>
Only change to your data should be that the obj.options should look like below:
obj: {
value: "en",
options: [
{ label: "Arabic", code: "ar" },
{ label: "Asturian", code: "ast" },
{ label: "English", code: "en" }
]
}
Relevant documentation transforming-selections

Related

JS: Extracting data from an array of objects

I have a complex query with 100s of fields and nested fields. What I want to do is, for each Index, extract the English and French text. As you can see in the array, there is no French text for some indexes. In that case I want to get the English text.
For me extracting the English text works fine because the text is already there, but incase of French, I get undefined errors. What would be the best way to implement this. Is Loadash needed for this or just pure JS methods?
Just to be clear, I have erros with extracting french because in some fields, french text is not available, I want to use the english value in that case.
Also It is recommend if I am able to get the English and French values by it's language field rather than the index. I have no idea how to do that.
Any suggestion, documentation is appreciated. Thank you!
example array:
[
{
id: "1",
name: [
{
language: "en-US",
text: "HOLIDAY"
}
],
order: 6,
Groups: [
{
name: [
{
language: "en-US",
text: "REGULAR"
}
],
code: "REGEARN"
},
{
name: [
{
language: "en-US",
text: "CHARGE"
}
],
code: "CHARGE"
}
]
}
]
and here is the code sandbox that reproduces my error:
CODE SAND BOX
https://codesandbox.io/s/javascript-forked-5073j
EDIT:
EXPECTED OUTPUT:
{
key: key,
englishtext: "Value Here",
frenchtext: "Value Here"
}
below is a working code, but issue is it does not work when there is no french language or that field. I get undefined errors. So is it possible I can get the needed data from the language field?
x.map((y) => ({
key: y.id,
name: y.name[0].text,
groupname: y.Groups ? x.Groups[0].name?.[0].text : 'N/A',
}))
Do you expect result like this? If you don't mind lodash.
const _ = require('lodash');
const getNames = (arr) => {
return arr.map((obj) => {
const id = obj.id;
const englishtext = _.get(obj, 'name[0].text', 'N/A');
const frenchtext = _.get(obj, 'name[1].text', englishtext);
return { id, englishtext, frenchtext };
});
};
console.log(getNames(x));
// [
// { id: '1', englishtext: 'HOLIDAY', frenchtext: 'HOLIDAY' },
// { id: '2', englishtext: 'Stat Holiday', frenchtext: 'Congé Férié' },
// { id: '3', englishtext: 'Over', frenchtext: 'Over' }
// ]

vue-select library set default value not working properly

This is the library that I'm using.
vue-select
And I have this kind of data
[
{ text: "AAA", value: 1 },
{ text: "BBB", value: 2 },
]
<v-select
id="modal-job_type"
:value="1" // v-model also doesnt work for me
item-value="value"
name="job_type"
:options="jobTypeOptions"
label="text"
/>
I expect to see "AAA" selected.
But instead I see "1" text.
What is wrong?
I guess you need to set a value of options to v-model, instead of the index. (Though, I couldn't find a page where it is clearly stated in the official document.)
It would look like;
const options = [
{ text: "AAA", value: 1 },
{ text: "BBB", value: 2 },
]
const selected = ref(options[1]) // Setting initial value
<v-select
v-model="selected"
label="text"
/>
Also, Vue Select does not have item-value property. It seems you are confused with Vuetify's v-select.
https://vuetifyjs.com/en/api/v-select/#props-item-value

How to update nested array (multi react-select)

I'm creating an app where I need to store selected values in array nested in object (category below). State looks like:
state = {
data: {
user: "",
title: "",
text: "",
category: [], // should store values
},
updateNoteId: null,
}
In my render() I have following form:
<form onSubmit={this.submitNote}>
<Select
name="category"
value={this.state.data.category}
options={options}
onChange={this.handleMultiChange}
multi
/>
<input type="submit" value="Save" />
</form>
Options are:
const options = [
{ value: 1, label: 'one' },
{ value: 2, label: 'two' },
{ value: 3, label: 'three' }
]
So the question is how this.handleMultiChange function should looks like to work. Category[] need to keep all values selected in Select which is react-select component (eg. it should be category = [1,3], when 'one' and 'three' were chosen). I tried many combination but none of them worked so far. I prefer to use ES6 without any external libraries/helpers to do that.
handleMultiChange(selectedOptions) {
this.setState({
data: {
...this.state.data,
categories: selectedOptions
}
})
}

Pass different array every time in ng-repeat

I am generating comboboxes dynamically and I need to pass a different collection to the ng-repeat every time.How can I do that?
<div ng-repeat="choice in $ctrl.inputFilterRows">
<md-select ng-model="choice.name">
<md-option ng-repeat="filter in $ctrl.filters" value="{{filter.value}}" >
{{filter.value}}
</md-option>
</md-select>
</div>
Tried to set from the controller, but didnt work:
self.inputFilterRows[0].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
An idea would be to use ng-if on several md-select elements and decide which one to enable based on a condition that suits you.
Another is to have a $scope variable that is linked to a single ng-repeat select, but you keep assigning new values to that $scope variable collection whenever you want. That would force a scope redraw and the ng-repeat would now use the new collection values.
Second one is probably cleaner.
EDIT:
Based on a better explanation provided in the comments below I now realise that you want a set of selects, each with their own set of options.
To achieve something like that I would suggest having an array of arrays, in which each object would represent a select, and then it's contents would be the options for that select.
$scope.selectArray = [
{ name: 'colours', filters: [{ value: 'black' }, { value: 'red' }, { value: 'blue' }] },
{ name: 'months', filters: [{ value: 'January' }, { value: 'February' }, { value: 'March' }] }
];
Now, you can have an ng-repeat iterating over selectArray (select in selectArrays) to create the selects, and then each one would contain another ng-repeat to iterate over the select.filters (filter in select.filters)
I am not going to write the exact code because you look like you know what you're doing and I'm sure you can put it together yourself very easily.
If you want to change the dataset of a specific select you can do something like:
$scope.selectArray[1].filters[0].value = 'December';
or
$scope.selectArray[1].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];

Angular chosen is not binding Array of Objects

I'm using angular chosen plugin for selecting an attribute on any select element.
My data is in this format:
$scope.pets = [
{
id: '1',
name: 'Dog',
desc:"Something"
},
{
id: '2',
name: 'Cat',
desc:"Something"
},
{
id: '3',
name: 'Rat',
desc:"Something"
}
];
And the angular choosen implementation for displaying the name using ng-options is:
<select multiple ng-model="myPets" ng-options="r as r.name for r in pets" chosen>
I'm able to get the drop down using ng-options for the above data like this,
But how can I bind the default values into the angular choosen input box if my ng model is bind to the following object:
$scope.myPets= {
id: '6',
name: 'Pig',
desc:"Something"
},
You can set the default values in the controller by using
$scope.myPets= [$scope.pets[0], $scope.pets[5]];
Compared to what you were thinking you need to use an array [] because you are using select multiple. You also have to directly refer to the existing objects or angular/javascript won't recognize the connection.

Categories