I'm using jquery-ui plugin, what I'm trying to accomplish is to use an array of pair values (Key and label value) as the source for an autocomplete text input.
My array looks like:
var valuesArray = [{
label: 'Name_1',
key: 1
}, {
label: 'Name_2',
key: 2
}, {
label: 'Name_3',
key: 3
}, {
label: 'Name_4',
key: 4
}];
I need the label attribute to appear in the text input while getting the key attribute when retrieving the input text element value.
Thanks in advance
I think that from what i understand, this is what you need.
$("#someID").autocomplete({
source: function(request, response) {
var data = [{
label: 'Name_1',
key: 1
}, {
label: 'Name_2',
key: 2
}, {
label: 'Name_3',
key: 3
}, {
label: 'Name_4',
key: 4
}];
response(data);
},
select: function( event, ui ) {
$( "#someID" ).val( ui.item.key);
alert(ui.item.key);
return false;
}
});
Related
I a getting data from the laravel using this response :
$unserialize = unserialize($import->field_names);
return response()->json( $unserialize, 200 ) ;
Now on the Vue JS I can console the response using this :
console.log(response);
and It's showing the data in array (Check the red arrow mark):
Now, I have a options empty array property like this:
options : []
I want to push object data to this array with a key value and text. This key's value will be that response data single item. So, To do this, I am using this:
response.data.forEach((item, index) => {
this.options.push({
value: item,
text: index
});
});
but If I console
console.log(this.options);
I can not see the array of object to this options propery. I can see this:
can you tell me why? I want this options should store the item like this:
options: [
{ value: null, text: 'Please select some item' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Default Selected Option' },
{ value: 'c', text: 'This is another option' },
{ value: 'd', text: 'This one is disabled', disabled: true },
]
Update:
Console.log(response);
I think that the problem could be in this keyword
you can modify your code in this way
this.options = [...this.options,
...response.data.map((item, index) =>
({
value: item,
text: index
})
)]
This question already has answers here:
Filter array of objects with another array of objects
(11 answers)
Closed 4 months ago.
I have two sample arrays below.
let arr1 = [
{ key: "WIHUGDYVWJ", className: "science" },
{ key: "qwljdhkuqwdnqwdk", className: "english" },
{ key: "likubqwd", className: "robotics" }
];
let arr2 = [
{ key: "WIHUGDYVWJ", title: "math" },
{ key: "qwljdhkuqwdnqwdk", title: "english" },
{ key: "likubqwd", title: "robotics" }
];
How can I filter arr1 to get only items that have 'className' value that matches arr2's item's 'title' value? (expecting only items with 'english' and 'robotics' to remain)
How can I filter arr1 to get only items that have 'className' value that do not match arr2's item's 'title' value? (expecting only items with 'science' to remain)
Thanks!
let arr1 = [
{ key: "WIHUGDYVWJ", className: "science" },
{ key: "qwljdhkuqwdnqwdk", className: "english" },
{ key: "likubqwd", className: "robotics" },
{ key: "abcd", className: "history" }
];
let arr2 = [
{ key: "WIHUGDYVWJ", title: "math" },
{ key: "qwljdhkuqwdnqwdk", title: "english" },
{ key: "likubqwd", title: "robotics" }
];
// q1 answer
console.log(arr1.map(arr1Item => arr2.filter(arr2Item => arr1Item.className === arr2Item.title)).flat());
// q2 answer
console.log(arr1.filter(arr1Item => !arr2.some(arr2Item => arr2Item.title === arr1Item.className)));
i wrote without using a for, if/else statement as much as possible.
this code may not be the best. i think it could be more improved.
I hope my answer is helpful
There is a state value
savedData: [
{ key: 'First Name', value: '' },
{ key: 'Last Name', value: '' },
{ key: 'Mobile', value: '' },
{ key: 'Email', value: '' },
{ key: 'Password', value: '' },
{ key: 'Forgot Password', value: '' },
{ key: 'CheckBox1', value: '' },
]
Text inputs are in a flat list, each text input is rendered in each cell.
How can I update a value in the array by index when onChange of text input is called, without using state variables or global variables?
You could pass the key as parameter for onChange method
onChange={() => this.handleChange("First Name")}
and then just update the value.
let field = savedDate.find(({key}) => key == key_param);
field.value = ...
I'd recommend to use the field's id as key for the savedData state and just pass the event.target.id as parameter.
savedData:[
{key:'firstName',value:''},
{key:'lastName',value:''},
{key:'mobile',value:''},
{key:'email',value:''},
{key:'password',value:''},
{key:'forgot Password',value:''},
{key:'checkBox1',value:''},
]
...............
onChange={(e) => this.handleChange(e.target.id)}
I cannot get my head around this problem.
I have a settings object which looks like
const setting = [
{
Key: 'root/',
Value: null,
},
{
Key: 'root/second-root/',
Value: null,
},
{
Key: 'root/second-root/names/',
Value: null,
},
{
Key: 'root/second-root/names/capital-letter',
Value: true,
},
{
Key: 'root/second-root/countries/',
Value: null,
},
{
Key: 'root/second-root/countries/enabledcountries',
Value: 'US,UK,DK',
},
{
Key: 'root/second-root/countries/async',
Value: 'true',
},
{
Key: 'root/second-root/countries/manual',
Value: 'true',
},
{
Key: 'root/second-root/countries/limit',
Value: '4200',
},
{
Key: 'root/second-root/names/onyl-last-name',
Value: false,
},
];
I need to convert it to look like
const wantedResult = [
{
'root': {
'Value': null,
'second-root': {
'Value': null,
'names': {
'Value': null,
'capital-letter': {
'Value': true,
}
'onyl-last-name': {
'Value': false,
}
},
'countries': {
'Value': null,
'enabledcountries': {
Value: 'US,UK,DK',
},
'async': {
Value: 'true',
},
'manual': {
Value: 'true',
},
'limit': {
Value: '4200',
}
}
}
}
}
];
The it is the Key property which controls the hierarchy. If it ends with a / the item is a directory else it is a value.
Problem is that the flat structure doesnt have to return the items in a correct order. Like in the example, the last item is 'root/second-root/names/onyl-last-name', even though the names hiarchy was in the beginning of the flat structure.
I have tried a form of array.reduce but get stuck every time. Could someone please help me.
You could iterate the array and take the value without the last slash and split it as path to the object for assigning the value.
If necessary put the result in an array.
In forEach works
a destructuring assignment for getting the key and value out of the object,
a replacement which looks for a slash at the end of the string with an empty string,
a splitting of the string by slash, it returns an array with strings without slashes,
using Array#reduce with the result object as accumulator.
Inside it uses a default pattern with a logical OR || which check if the left side is a truthy value and if not, it assigns an object. This value is returned for the check with the next key.
at the end of the iteration it retuns an object reference and then the value gets assigned.
var setting = [{ Key: 'root/', Value: null }, { Key: 'root/second-root/', Value: null }, { Key: 'root/second-root/names/', Value: null }, { Key: 'root/second-root/names/capital-letter', Value: true }, { Key: 'root/second-root/countries/', Value: null }, { Key: 'root/second-root/countries/enabledcountries', Value: 'US,UK,DK' }, { Key: 'root/second-root/countries/async', Value: 'true' }, { Key: 'root/second-root/countries/manual', Value: 'true' }, { Key: 'root/second-root/countries/limit', Value: '4200' }, { Key: 'root/second-root/names/onyl-last-name', Value: false }],
result = {};
setting.forEach(({ Key, Value }) => Key
.replace(/\/$/, '')
.split('/')
.reduce((o, k) => o[k] = o[k] || {}, result).Value = Value
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I'm working on a PrestaShop page with the file extension ".tpl". I get the javascript code to auto complete like this:
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },];
While I also already have a foreach like the example below:
{foreach from=$currencies item=currency}
{$currency.name}
{$currency.code}
{/foreach}
How to output currencies value with foreach? I tried this code:
var currencies = [
{foreach from=$currencies item=currency}
{ value: '{$currency.name}', data: '{$currency.code}' },
{/foreach},];
http://i.stack.imgur.com/DhYgL.jpg
You can use json_encode to output a PHP array to JavaScript
This is the JavaScript code in the TPL
var currencies = JSON.parse('{$currencies|json_encode}');
{$currencies|json_encode} will output something like this
[{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' }, ...]
This output will be passed to the JavaScript function JSON.parse which will transform the output string to a JavaScript object
var newArray = [];
for (var i=0; i < currencies.length; i++) {
newArray.push({value: whatever, data: whateverVar})
}
I am still not sure what you want but that is the best I can give from what I think you want.