There are two arrays available:
public favoriteTeams: any[] = [
{ name: 'Team Batman' },
{ name: 'Team Superman' },
{ name: 'Team Darkseid' },
{ name: 'Team Wonder Woman' }
];
public searchTeams: any[] = [
{ name: 'Team Iron Man' },
{ name: 'Team Spider Man' },
{ name: 'Team Ant Man' },
{ name: 'Team War Machine' },
{ name: 'Team Batman' },
{ name: 'Team Thor' }
];
The goal is to identify duplicate items in both arrays and remove the duplicates from one array using the .filter method.
At present, the filtering process only scans through the initial array without cross-checking with another array to eliminate the matching values.
public filterSearchTeams(name: string) {
return this.searchTeams
.filter(team => team.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
Class update:
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
@Component({
selector: 'dev-team-chooser',
templateUrl: './dev-team-chooser.component.html',
styleUrls: ['./dev-team-chooser.component.css']
})
export class DevTeamChooserComponent {
public favoriteTeamCtrl: FormControl;
public searchTeamCtrl: FormControl;
public foundTeams: Observable<any[]>;
public favoriteTeams: any[] = [
{name: 'Team Batman'},
{name: 'Team Superman'},
{name: 'Team Darkseid'},
{name: 'Team Wonder Woman'}
];
public searchTeams: any[] = [
{name: 'Team Iron Man'},
{name: 'Team Spider Man'},
{name: 'Team Ant Man'},
{name: 'Team War Machine'},
{name: 'Team Batman'},
{name: 'Team Thor'}
];
constructor() {
this.favoriteTeamCtrl = new FormControl();
this.searchTeamCtrl = new FormControl();
this.foundTeams = this.searchTeamCtrl.valueChanges
.map(team => team ? this.filterSearchTeams(team) : this.searchTeams.slice());
}
public filterSearchTeams(name: string) {
return this.searchTeams
.filter(team => team.name.toLowerCase().indexOf(name.toLowerCase()) === 0)
.filter(val => !this.favoriteTeams.includes(val));
}
}