Javascript过滤嵌套数组

我正在尝试在Angular应用程序中的对象数组中的嵌套数组上过滤。下面是一段组件代码-

var teams = [
  { name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name: 'm3' }] }, 
  { name: 'Team2', members: [{ name: 'm4' }, { name: 'm5' }, { name: 'm6' }] }, 
  { name: 'Team3', members: [{ name: 'm7' }, { name: 'm8' }, { name: 'm9' }] }
];

我试图实现的是，如果我搜索

m5

，例如，我的结果应该是-

var teams = [
  { name: 'Team1', members: [] }, 
  { name: 'Team2', members: [{ name: 'm5' }] }, 
  { name: 'Team3', members: [] }
];

所以我有

团队

和

过滤团队

属性，在我的搜索功能中我正在做-

onSearchChange(event: any): void {
  let value = event.target.value;
  this.filteredTeams = this.teams.map(t => {
    t.members = t.members.filter(d => d.name.toLowerCase().includes(value));
    return t;
  })
}

---

不过，这在某种程度上是可行的，因为我正在替换成员，这会在每次调用时破坏数组（如果这样做有意义的话）。我理解为什么会发生这种情况，但我的问题是实现此过滤器的最佳方法是什么？

检查此项。而不是硬编码的

m5

传递您的值

const团队=[
{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，
{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}]}，
{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}
];
const filteredTeams=teams.map（team=>（{name:team.name，members:team.members.filter（member=>member.name.includes（'m5'））}）；
console.log（filteredTeams）检查此项。而不是硬编码的
m5
传递您的值


const团队=[
{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，
{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}]}，
{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}
];
const filteredTeams=teams.map（team=>（{name:team.name，members:team.members.filter（member=>member.name.includes（'m5'））}）；
console.log（filteredTeams）您非常接近，您唯一做错的事情就是在
团队中对源对象进行变异

基本上，您可以使用spread运算符生成一个新条目，然后返回一个包含新值的全新数组


const团队=[
{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，
{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}]}，
{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}
];
常量值='m5'；
const result=this.teams.map（t=>{
const members=t.members.filter（d=>d.name.toLowerCase（）.includes（value））；
返回{…t，成员}；
})
console.log（result）
您非常接近，唯一做错的事情就是在
团队中对源对象进行了变异

基本上，您可以使用spread运算符生成一个新条目，然后返回一个包含新值的全新数组


const团队=[
{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，
{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}]}，
{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}
];
常量值='m5'；
const result=this.teams.map（t=>{
const members=t.members.filter（d=>d.name.toLowerCase（）.includes（value））；
返回{…t，成员}；
})
log（result）
您正在修改原始对象，但可以将新属性分配给result对象以进行映射


var-teams=[{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}，{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}]，
结果=teams.map（o=>Object.assign(
{},
啊,，
{members:o.members.filter（（{name}）=>name==='m5'）}
));
控制台日志（结果）；
控制台日志（团队）
.as console wrapper{max height:100%！important；top:0；}
您正在修改原始对象，但可以将新属性分配给结果对象以进行映射


var-teams=[{name:'Team1'，成员：[{name:'m1'}，{name:'m2'}，{name:'m3'}]}，{name:'Team2'，成员：[{name:'m4'}，{name:'m5'}，{name:'m6'}，{name:'Team3'，成员：[{name:'m7'}，{name:'m8'}，{name:'m9'}]}]，
结果=teams.map（o=>Object.assign(
{},
啊,，
{members:o.members.filter（（{name}）=>name==='m5'）}
));
控制台日志（结果）；
控制台日志（团队）
。作为控制台包装{max height:100%！important；top:0；}
首先尝试分离您的筛选函数：

const filterTeamMembers = (teams, filterArr) => {
    const useFilter = filterArr.map(x => x.toLowerCase());

    return teams.map(team => ({
        ...team,
        members: team.members.filter(member => useFilter.includes(member.name))
    }))
};
// =========== And then:

onSearchChange(event: any): void {
    let value = event.target.value;
    this.filteredTeams = filterTeamMembers(this.teams, [value]);
}

首先尝试分离过滤功能：

const filterTeamMembers = (teams, filterArr) => {
    const useFilter = filterArr.map(x => x.toLowerCase());

    return teams.map(team => ({
        ...team,
        members: team.members.filter(member => useFilter.includes(member.name))
    }))
};
// =========== And then:

onSearchChange(event: any): void {
    let value = event.target.value;
    this.filteredTeams = filterTeamMembers(this.teams, [value]);
}