Develop Reference

How to merge arrays that derive from the same variable

I have the following line of code which returns me one or more arrays depending on the checkbox that is clicked.
selected.forEach(langsel => {
let filtered = person.filter(pers => pers.language == langsel);
})
selected and I do not report the other variables for simplicity in reading.
I have a list of checkboxes where each refers to a particular language. So every time a checkbox is clicked I want the people who speak that language to be returned to me; this must be returned in an array of objects.
catsel refers to the checkbox that is selected (being a checkbox, more than one can also be selected). So for each language that is selected it returns me the array of objects in the filtered variable.
For example, if I select the English language through the checkbox, I get:
[{id: "2", name: "Tomas Addreh", language: "English"},{id: "6", name: "Mark Addreh", language: "English"}];
if together with the checkbox selected previously, therefore English, I also select the checkbox relating to the Spanish language, filtered returns me:
[{id: "2", name: "Tomas Addreh", language: "English"},{id: "6", name: "Mark Addreh", language: "English"}];
[{id: "15", name: "Alex Atres", language: "Spanish"}, {id: "1", name: "Mark Sertoj", language: "Spanish"}, id: "12", name: "Martha Forrest", language: "Spanish"];
filtered in the latter case returns me two separate arrays.
I want them to be merged into an array.
Can anyone kindly help me?

I concat the array by using spread operator.
let people = [];
selected.forEach(langsel => {
let filteredPerson = person.filter(pers => pers.language == langsel);
people = [...people, ...filteredPerson];
})

How to set custom CoreUI column names in Vue?

I have an array of item objects for the table. e.g.:
[{ name: 'Sam', age: 24 }]
I want to set custom field names like instead of column to be named as age, I want it to display column name as Id instead of age. So, basically how can I set custom column names?
Here is their documentation if that helps: https://coreui.io/vue/docs/components/table.html
Check fields props.

Using the fields attribute of the <CDataTable>, you can specify an array of fields to use for column names. That can be an array of strings or objects. When using the object syntax, you can specify various properties, such as the label of the column. See in the <CDataTable> docs:
key (required)(String) - define column name equal to item key.
label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting
This lets you name the column differently from the key. Here is an example where the table has column keys "id" and "name", but the label is "ID" and "Surname":
<div id="app">
<cdatatable
:items="items"
:fields="fields"
>
</cdatatable>
</div>
new Vue({
el: "#app",
data() {
return {
items: [
{ id: 1, name: 'Mary' },
{ id: 2, name: 'Bob' }
],
fields: [ // Array of column object data
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Surname' }
]
}
}
});

Increment array object duplicate keys by 1 in javascript

This is my array
[
{Product Name: "yafuyafu"},
{Parameter: "sss"},
{Description: "uyghik"},
{Parameter: "some"},
{Description: "YogaYoga"}
]
The key Parameter and Description appears twice here and I want it to be like this
[
{Product Name: "yafuyafu"},
{Parameter: "sss"},
{Description: "uyghik"},
{Parameter1: "some"},
{Description1: "YogaYoga"},
{Parameter2: "some"},
{Description2: "YogaYoga"}
{Parameter3: "some"},
{Description3: "YogaYoga"}
]
I populate this Select with the Keys of my array objects
This select would not add the duplicate Parameter and description keys and i believe it is because of the name and besides that i want the user to be able to differentiate them.
Please can someone help me figure this out, thank you very much in advance.

Angularjs Multidimensional array and two relative select boxes

I have a multidimensional array that holds the product names and versions.
I want to create an interface that lets the user select the product from a select box, and then the version number in the second select box. The second select box should only show the versions numbers of the product that the user selected in the first select box.
This is my mutidimensional array:
[Object]0:
name: "Product 1"
versions: [Array]0:
number: "1.0"
number: "1.5.2"
1:
name: "Product 2"
versions: [Array]0:
number: "0.0"
number: "0.5"
The user has the option to choose multiple products, so I created an array to hold the users selection.
my controller is setup like this:
app.controller('mainController', function ($scope) {
$scope.products = [{id: 1, name: '', versions: []}];
$scope.packages = [];
$scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
$scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};
$scope.addProduct = function(){
var id = $scope.products.length + 1;
$scope.products.push({id: id, name: "", version: []});
};
});
And the select boxes are setup like this with angularjs:
<div ng-repeat="product in products">
<label>Product</label>
<select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>
<label>Version</label>
<select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
</div>
<button ng-click="addProduct()">Add Product</button>
What I tried to do was setup the ng-options to select the versions object of the current product. But this doesn't work.
I created a jsFiddle of what I currently have:
http://jsfiddle.net/rkyu4rjq/
I would really appreciate any suggestions on how to link the version select box with the product selected.
TIA

Eventhough I'm not really keeping track of which version chosen for each product I fixed your relative select options.
You can find a solution here. This should get you on your way!

I missed something very simple.
In the version select box binding I should of used version.number for version in product.product.versions instead of version.number for version in product.versions
Here is a working jsFiddle: http://jsfiddle.net/rkyu4rjq/2/

Optgroups with ui-select (new version) when actual options are below what should be used for optgroups

I'm using UI-Select (select2 theme) with an array of data which is returned in the following form:
Array of Objects [
0: Object {
category: "Category name, to be used as optgroup label",
options: [
0: Object {
id: 5,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 6,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 7,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
1: Object {
category: "Another category name, to be used as second optgroup label",
options: [
0: Object {
id: 44,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 45,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 47,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
]
My function to create optgroups:
$scope.createOptGroups = function(item){
return item.category;
};
and it does indeed create my optgroups properly.
The issue here is the following. To be able to create optgroups I need to be at this level:
<ui-select multiple ng-model="diseaseObject.chosenDiseases.states">
<ui-select-match placeholder="Start typing disease name or click in the box...">{{$item}}</ui-select-match>
<ui-select-choices
group-by="createOptGroups"
repeat="state in diseaseObject.allStates | filter: $select.search track by $index">
{{state}}
</ui-select-choices>
</ui-select>
If you wonder what is the outcome of this code, take a look at this pic: http://screencast.com/t/S2VBuK1jXtA
So obviously the data is there but needs to be narrowed down to the desired diseaseName property.
But... If I do that I'm going to lose the optgroups! I will no longer be at the level where category property is available.
Another idea would be to narrow on the state like: state.options. But then the value is still an array of objects that needs iteration over itself. However, if there's an option to implement yet another repeater for the actual options (with the intention to achieve something like <span ng-repeat="name in state.options">{{name}}</span> - that would do it. I have already tried but the directive (ui-select) doesn't like it.
They have an official demo for this group-by stuff but in this particular case the function just creates optgroups as custom strings (letter spans) which is pretty different from my problem.
See the example at the very bottom: http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview