indexOf comparing two lists, not matching exact values - arrays

Question

Alright, so i have a list of checkmark forms, and upon clicking them, i submit an event and put all checked boxes values into a list, i then compare that list with another list to changes the matching checked values from true to false (using index of).
when i click canada, my console prints the expected output (Canada is true, United States and Mexico are false),
but then i click Mexico, so now Canada and Mexico have been selected, and all my countries turn to false.
i'm wondering if this is a problem with the way i'm implenting index of, or is it the order of calling functions that is causing this? a checked box should return true.
component:
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'app-geo-drop',
templateUrl: './geo-drop.component.html',
styleUrls: ['./geo-drop.component.css']
})
export class GeoDropComponent implements OnInit {
selectedItems: any [] = [];
places = [
{ code: 'US', allow: 'true', name: 'United States', continent: 'North America' },
{ code: 'CA', allow: 'true', name: 'Canada', continent: 'North America' },
{ code: 'MX', allow: 'false', name: 'Mexico', continent: 'North America' }
];
countriesForm: FormGroup;
constructor() { }
ngOnInit() {
// add checkbox for each country
this.countriesForm = new FormGroup({});
for (let i = 0; i < this.places.length; i++) {
this.countriesForm.addControl(
this.places[i].name, new FormControl(false)
)
}
}
allow(selectedPlaces: Array<any>, allPlaces: Array<any>) {
allPlaces.filter(function (place) {
if (place.name.indexOf(selectedPlaces) > -1) {
place.allow = true;
} else {
place.allow = false;
};
});
this.places.forEach(item => {
console.log(item.name, item.allow);
});
}
search(place, event) {
let index = this.selectedItems.indexOf(place.name);
if (event.target.checked) {
if (index === -1) {
this.selectedItems.push(place.name);
console.log(this.selectedItems);
}
} else {
if (index !== -1) {
this.selectedItems.splice(index, 1);
console.log(this.selectedItems);
}
}
this.allow(this.selectedItems, this.places);
}
}
html
<div class="geo-list">
<div class="content-box container">
<form [formGroup]="countriesForm">
<div class="place" *ngFor="let place of places">
<input
type="checkbox"
formControlName="{{place.name}}"
(change)="search(place, $event)"
>
{{ place.name }} | {{ place.code }} | {{ place.continent }}
</div>
</form>
</div>
</div>

Answer 1

The answer is in your own debug info; you're asking the index of "Canada, Mexico"
Since none of your countries are called "Canada, Mexico", they're false.
You need to loop through all selected boxes in your html to fix it.

Answer 2

I found a simple solution. though i don't believe it's the fastest, if a faster method is known, please post it. this method changes the value directly on every (change), and then binds the checkbox to the current value of allowed
comp.
export class GeoDropComponent implements OnInit {
places = [
{ code: 'US', allow: true, name: 'United States', continent: 'North America' },
{ code: 'CA', allow: true, name: 'Canada', continent: 'North America' },
{ code: 'MX', allow: false, name: 'Mexico', continent: 'North America' }
];
countriesForm: FormGroup;
constructor() { }
// use ng on destroy to send final copy?
ngOnInit() {
// add checkbox for each country
this.countriesForm = new FormGroup({});
for (let i = 0; i < this.places.length; i++) {
this.countriesForm.addControl(
this.places[i].name, new FormControl(false)
)
}
}
search(place, event) {
for (let i = 0; i < this.places.length; i++) {
if (this.places[i].name === place.name) {
this.places[i].allow === true ? this.places[i].allow = false : this.places[i].allow = true;
}
}
console.log(place.allow);
console.log(this.places);
}
}
html
<input
type="checkbox"
formControlName="{{place.name}}"
value="{{place.allow}}"
(change)="search(place, $event)"
[checked]="place.allow"
>