Javascript过滤嵌套数组

Question

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

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: [] }
];

因此，我有teams和filteredTeams属性，并且在搜索功能中，我正在执行-

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;
  })
}

现在，这确实在某种程度上起作用了，因为我要替换成员，这会破坏每次调用时的数组（如果这样的话）。 我了解为什么会发生这种情况，但我的问题是实现此过滤器的最佳方法是什么？

Answer 1

您非常亲密，您做错的唯一一件事就是对teams的源对象进行突变

基本上，您可以使用传播运算符生成一个新的条目，然后返回带有新值的全新数组。

 const 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' }] } ]; const value = 'm5'; const result = this.teams.map(t => { const members = t.members.filter(d => d.name.toLowerCase().includes(value)); return { ...t, members }; }) console.log(result) 

Answer 2

检查一下。 而不是硬编码的m5传递您的价值。

 const 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' }] } ]; const filteredTeams = teams.map(team => ({ name: team.name, members: team.members.filter(member => member.name.includes('m5')) })); console.log(filteredTeams); 

Answer 3

您正在突变原始对象，但是可以将新属性赋给结果对象以进行映射。

 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' }] }], result = teams.map(o => Object.assign( {}, o, { members: o.members.filter(({ name }) => name === 'm5') } )); console.log(result); console.log(teams); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 4

尝试先分离您的过滤器功能：

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]);
}