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
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; }
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);
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>
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.
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