时间戳

首页 > 解决方案 > Javascript过滤嵌套数组

javascript - Javascript过滤嵌套数组

问题描述

我正在尝试在 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;
  })
}

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

标签： javascriptangulartypescript

解决方案

你非常接近，你做错的唯一一件事就是改变源对象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 = teams.map(t => {
  const members = t.members.filter(d => d.name.toLowerCase().includes(value));
  return { ...t, members };
})

console.log(result)

推荐阅读