Select2 preselect val array parse just first value of array - javascript

I cannot understand why Select2 is parsing just the first value of the val() Array. I have tried with Select2 v4.0.3
Whether the count of values in the array, Select2 still show only the first value of the Array.
So, I need to populate Select2 field on Event (modal.open), which is mostly the same as populate Button.on('click').
var checkList = [2, 4, 5, 7];
$("#update").on('click', function() {
$("#list").select2().select2('val', checkList);
})
jsfiddle

Do it this way:
var checkList = [2, 4, 5, 7];
$("#update").on('click', function() {
$("#list").val(checkList).trigger("change");
});
Updated jsfiddle

The method $("select").select2("val", "1"); is Deprecated instead of using this method try to use the updated one $("select").val("1").trigger("change");
Refer the link
https://select2.github.io/announcements-4.0.html#removed-methods
$(document).ready(function() {
$("#list").select2({
maximumSelectionLength: 4,
placeholder: "Click 'Update'",
allowClear: true,
data: [{
id: 1,
text: "ABBOUD NIDAL"
}, {
id: 2,
text: "ABDULLA AMER-RAUL"
}, {
id: 3,
text: "AL MOMANI RACAN"
}, {
id: 4,
text: "ALEXANDRESCU BOGDAN"
}, {
id: 5,
text: "ALEXANDRU DARIA MARIA"
}, {
id: 6,
text: "ANASTASE ANTONIA"
}, {
id: 7,
text: "ANGHEL DIANA"
}, {
id: 8,
text: "AROSCULESEI IONUT"
}, {
id: 9,
text: "ASANDEI ANDREI"
}, {
id: 10,
text: "AXINTE ANDREEA GABRIELA"
}, {
id: 11,
text: "BADESCU IOANA"
}, {
id: 12,
text: "BALACI SEBASTIAN"
}, {
id: 13,
text: "BANI-MENYAH LARA"
}, {
id: 14,
text: "BEJENARU ANDREI"
}, {
id: 15,
text: "BERBECEL ALEXANDRU"
}, {
id: 16,
text: "CANAL ALEXANDRE"
}, {
id: 17,
text: "CAPILNEAN ADINA"
}, {
id: 18,
text: "CHECHERITA EDUARD ANDREI"
}, {
id: 19,
text: "CIOBANU CATALIN GABRIEL"
}, {
id: 20,
text: "CIUCU TUDOR ANDREI"
}]
});
var checkList = ["2", "4", "5", "7"];
$("#update").on('click', function() {
$("#list").val(checkList).trigger("change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<select multiple="multiple" id="list" name="nombres">
</select>
<br>
<button id="update">Update</button>

Related

Filter out data based off multiple user inputs

im working on filtering out data.
I'm having trouble extracting the text values in the tags property to compare it to the input array.
How would I build this in javascript?
let user_input =["Bananas", "Kiwi"]
const data= [
{
id: 18,
username: "james",
tags: [ { id: 1, text: "Bananas" }, { id: 2, text: "Mangos" }]
},
{
id: 17,
username: "anita",
tags: [ { id: 3, text: "Bananas" }, { id:4 , text: "Oranges" }, { id:5 , text: "Strawberries" } ]
},
{
id: 16,
username: "david",
tags: [ { id: 2, text: "Mangos" }]
},
{
id: 15,
username: "nicole",
tags: [ { id: 6, text: "Kiwi" }]
},
]
im expecting output to be [{id: 18 ...}, {id:17 ...}, {id:15 ...}]
You can use a filter() call, calling some() on the tags array of each iterated object to test if the user_input array includes() any of the text values of each iterated tags object.
const data = [{ id: 18, username: "james", tags: [{ id: 1, text: "Bananas" }, { id: 2, text: "Mangos" }] }, { id: 17, username: "anita", tags: [{ id: 3, text: "Bananas" }, { id: 4, text: "Oranges" }, { id: 5, text: "Strawberries" }] }, { id: 16, username: "david", tags: [{ id: 2, text: "Mangos" }] }, { id: 15, username: "nicole", tags: [{ id: 6, text: "Kiwi" }] },];
const user_input = ["Bananas", "Kiwi"];
const result = data.filter(({ tags }) =>
tags.some(({ text }) => user_input.includes(text)));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
If instead you wanted to only return objects that matched all the tags in the user_input array, you would instead call every() on user_input, map() the tags array of each iterated object to include only the text values, and then check that the returned array includes() each tag.
const data = [
{ id: 18, username: "james", tags: [{ id: 1, text: "Bananas" }, { id: 2, text: "Mangos" }] },
{ id: 17, username: "anita", tags: [{ id: 3, text: "Bananas" }, { id: 4, text: "Oranges" }, { id: 5, text: "Strawberries" }] },
{ id: 16, username: "david", tags: [{ id: 2, text: "Mangos" }] },
{
id: 15, username: "nicole",
tags: [
{ id: 6, text: "Kiwi" },
{ id: 6, text: "Bananas" }]
}
];
const user_input = ["Bananas", "Kiwi"];
const result = data.filter(({ tags }) =>
user_input.every(tag =>
tags
.map(({ text }) => text)
.includes(tag)));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Assign new properties to an array of Objects

I have an array of Objects
const options = [
{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
I am trying to write a function that will assign new properties to the object.
The output I am looking for is:
const options = [
{ value: 1, label: "Back Pain" },
{ value: 2, label: "Body aches" },
{ value: 3, label: "Cold Sores" },
{ value: 4, label: "Cough" },
{ value: 5, label: "Constipation" },
];
I have tried to loop through the array using a for loop, but can not figure it out.
Thanks for the help:)
You can do it like this:
const data=[{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
var result = data.map(({id:value, name:label})=>({value, label}));
console.log(result);

Multi-select boxes not search with parent

i'm using select2 in v4.0.3
When I search through the children, for example, "sub category 1", the search appears and your parent "Category 1" is also located above.
https://ibb.co/iNAdLG
But, when I search for "Category 1" it does not show me any of the children. I have reviewed the documentation and several approaches but none has worked for me.
https://ibb.co/eVuSEb
Annex images of reference and code
$("#multisearch").select2({
language: "es",
closeOnSelect: false,
placeholder: "Comienza tu búsqueda",
data: [{
id: 0,
text: 'Linea 1',
children: [{
id: 1,
text: 'San Pablo'
},
{
id: 2,
text: 'Pajaritos'
},
{
id: 3,
text: 'Las Rejas'
},
{
id: 4,
text: 'Ecuador'
}
]
},
{
id: 5,
text: 'Linea 2',
children: [{
id: 6,
text: 'La Cisterna'
},
{
id: 7,
text: 'El Parrón'
},
{
id: 8,
text: 'Lo Ovalle'
},
{
id: 9,
text: 'Ciudad del niño'
},
{
id: 10,
text: 'Pajaritos'
}
]
},
{
id: 1,
text: 'prueba'
},
]
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px">
</select>
I will be attentive, thank you very much
You can achieve this by implementing custom matcher function.
Please check the example below:
$(document).ready(function(){
function customMatcher(params, data) {
data.parentText = data.parentText || "";
if ($.trim(params.term) === '') {
return data;
}
if (data.children && data.children.length > 0) {
var match = $.extend(true, {}, data);
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
child.parentText += data.parentText + " " + data.text;
var matches = customMatcher(params, child);
if (matches == null) {
match.children.splice(c, 1);
}
}
if (match.children.length > 0) {
return match;
}
return customMatcher(params, match);
}
var original = (data.parentText + ' ' + data.text).toUpperCase();
var term = params.term.toUpperCase();
if (original.indexOf(term) > -1) {
return data;
}
return null;
}
$("#multisearch").select2({
language: "es",
closeOnSelect: false,
matcher: customMatcher,
placeholder: "Comienza tu búsqueda",
data: [{
id: 0,
text: 'Linea 1',
children: [{
id: 1,
text: 'San Pablo'
},
{
id: 2,
text: 'Pajaritos'
},
{
id: 3,
text: 'Las Rejas'
},
{
id: 4,
text: 'Ecuador'
}
]
},
{
id: 5,
text: 'Linea 2',
children: [{
id: 6,
text: 'La Cisterna'
},
{
id: 7,
text: 'El Parrón'
},
{
id: 8,
text: 'Lo Ovalle'
},
{
id: 9,
text: 'Ciudad del niño'
},
{
id: 10,
text: 'Pajaritos'
}
]
},
{
id: 1,
text: 'prueba'
},
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px">
</select>

lodash recursively find item in array

What might be the easiest solution in lodash to recursively find item in array by, for example, 'text' field with value 'Item-1-5-2'?
const data = [
{
id: 1,
text: 'Item-1',
children: [
{ id: 11, text: 'Item-1-1' },
{ id: 12, text: 'Item-1-2' },
{ id: 13, text: 'Item-1-3' },
{ id: 14, text: 'Item-1-4' },
{
id: 15,
text: 'Item-1-5',
children: [
{ id: 151, text: 'Item-1-5-1' },
{ id: 152, text: 'Item-1-5-2' },
{ id: 153, text: 'Item-1-5-3' },
]
},
]
},
{
id: 2,
text: 'Item-2',
children: [
{ id: 21, text: 'Item-2-1' },
{ id: 22, text: 'Item-2-2' },
{ id: 23, text: 'Item-2-3' },
{ id: 24, text: 'Item-2-4' },
{ id: 25, text: 'Item-2-5' },
]
},
{ id: 3, text: 'Item-3' },
{ id: 4, text: 'Item-4' },
{ id: 5, text: 'Item-5' },
];
Thank You!
In plain Javascript, you could use Array#some recursively.
function getObject(array, key, value) {
var o;
array.some(function iter(a) {
if (a[key] === value) {
o = a;
return true;
}
return Array.isArray(a.children) && a.children.some(iter);
});
return o;
}
var data = [{ id: 1, text: 'Item-1', children: [{ id: 11, text: 'Item-1-1' }, { id: 12, text: 'Item-1-2' }, { id: 13, text: 'Item-1-3' }, { id: 14, text: 'Item-1-4' }, { id: 15, text: 'Item-1-5', children: [{ id: 151, text: 'Item-1-5-1' }, { id: 152, text: 'Item-1-5-2' }, { id: 153, text: 'Item-1-5-3' }, ] }, ] }, { id: 2, text: 'Item-2', children: [{ id: 21, text: 'Item-2-1' }, { id: 22, text: 'Item-2-2' }, { id: 23, text: 'Item-2-3' }, { id: 24, text: 'Item-2-4' }, { id: 25, text: 'Item-2-5' }, ] }, { id: 3, text: 'Item-3' }, { id: 4, text: 'Item-4' }, { id: 5, text: 'Item-5' }, ];
console.log(getObject(data, 'text', 'Item-1-5-2'));
.as-console-wrapper { max-height: 100% !important; top: 0; }
It's the perfect spot for a recursive function.
function findText(items, text) {
if (!items) { return; }
for (const item of items) {
// Test current object
if (item.text === text) { return item; }
// Test children recursively
const child = findText(item.children, text);
if (child) { return child; }
}
}
That's also the best way to get the maximum performances. Traversal is some in depth-first-search way.

How to use filters in Angularjs? [duplicate]

This question already has answers here:
Angular.js ng-repeat filter by property having one of multiple values (OR of values)
(7 answers)
Closed 7 years ago.
I have this collection :
{ id: 1, courseId: 2, text: 'John' },
{ id: 2, courseId: 2, text: 'Willi' },
{ id: 3, courseId: 2, text: 'Inga' },
{ id: 4, courseId: 1, text: 'Jerry' },
{ id: 5, courseId: 1, text: 'Michael' },
{ id: 1, courseId: 3, text: 'John' },
{ id: 2, courseId: 3, text: 'Willi' },
{ id: 3, courseId: 4, text: 'Inga' },
{ id: 4, courseId: 5, text: 'Jerry' },
{ id: 5, courseId: 5, text: 'Michael' }
I want to render in view with help of ng-repeat directive only records that have id =1 and id=2 and id=5.
How can I do it using filter in angularjs?
You need to create a custom filter that will do the trick
Markup
ng-repeat="item in items | filterArray: [1, 2, 5]"
Filter
app.filter('filterArray', function() {
return function(inputArray, arrayToCompare) {
return inputArray.filter(function(value) {
console.log(arrayToCompare.indexOf(value.id), value)
return arrayToCompare.indexOf(value.id) != -1;
})
}
})
Working PLunkr

Categories