I have the following working method. It creates an array of items (which I then use to populate a select dropdown) that haven't otherwise been previously used throughout the rest of the form array. I'm just wondering if there is a shorter more elegant way of doing all this?
uniqueChoiceLocaleItems(currentValue) {
// Create an array of all the ids already taken. ie. ["en", "fr", "es"];
var idsTaken = [];
this.myForm['controls'].languages['controls'].forEach((x, index) => {
if ((x['controls'].id.value != currentValue)) {
idsTaken.push(x['controls'].id.value);
}
});
// Loop through our main master 'this.locales' array which has ALL the locales in the world and filter out all the ids from the 'idsTaken' array
var uniqueItems = [];
this.locales.forEach((x, index) => {
if (idsTaken.indexOf(x.code) !== -1) {
} else {
uniqueItems.push(x);
}
});
return uniqueItems;
}
You can use a Set and its constructor callback to create it. Then delete currentValue from that set (it doesn't matter whether it was actually in it or not). Finally use filter:
uniqueChoiceLocaleItems(currentValue) {
var idsTaken = new Set(
this.myForm.controls.languages.controls.map(x => x.controls.id.value)
);
idsTaken.delete(currentValue);
return this.locales.filter(x => !idsTaken.has(x.code));
}
Simple and modified version.
var idsTaken = this.myForm["controls"].languages["controls"].filter(
(x) => x["controls"].id.value != currentValue
).map((x) => x["controls"].id.value);
var uniqueItems = this.locales.filter((x) => idsTaken.indexOf(x.code) === -1);