Javascript 筛选数组内的数据并返回使用组筛选的对象

我有一个这样的对象，我需要在每个组项中过滤规则，但是我还需要返回过滤规则旁边的组名

{
  "id": "rulesCompany",
  "group": [
    {
      "name": "Cadastral",
      "rule": [
        {
          "title": "Receita Federal",
          "description": "Fonte atualizada mensalmente.",
          "homonym": false,
          "criticality": "high"
        },
        {
          "title": "CNAE Primário - Alteração",
          "description": "Fonte atualizada mensalmente.",
          "homonym": false,
          "criticality": "high"
        },
      ]
    },
    {
      "name": "Dados modelados",
      "rule": [
        {
          "title": "Nível de Atividade - Alteração",
          "description": "Fonte atualizada mensalmente.",
          "homonym": false,
          "criticality": "high"
        },
        {
          "title": "Faturamento Presumido",
          "description": "Fonte atualizada mensalmente.",
          "homonym": false,
          "criticality": "medium"
        }
      ]
    },
  ]
}

例如，如果我在搜索字段中搜索“Rece”，我需要返回组“地籍/Receita Federal”，但我不知道如何过滤数据中的数据

到目前为止我所做的：

模块.vue

---

试试这个电脑道具

filteredPolicyRules() {
  if (this.searchQuery) {
    return this.policyRules.group.reduce((groups, { name, rule }) => {
      const rules = [];

      rule.forEach(r => {
        if (r.title.startsWith(this.searchQuery)) {
          rules.push(r);
        }
      });

      if (rules.length > 0) {
        groups.push({
          name,
          rules
        });
      }

      return groups;
    }, []);
  }

  return this.policyRules;
}

我建议将它们分别称为

组

和

规则

（复数），以避免将来的混淆——毕竟它们是数组

完整演示：

const policyRules={
“id”：“规则公司”，
“集团”：[{
“名称”：“地籍”，
“规则”：[{
“标题”：“联邦收据”，
“描述”：“Fonte atualizada mensalmente.”，
“谐音”：假，
“临界性”：“高”
},
{
“标题”为“巴西国家航空公司-奥特拉萨奥”，
“描述”：“Fonte atualizada mensalmente.”，
“谐音”：假，
“临界性”：“高”
},
]
},
{
“名称”：“Dados modelados”，
“规则”：[{
“标题”：“Nível de Atividade-Alteração”，
“描述”：“Fonte atualizada mensalmente.”，
“谐音”：假，
“临界性”：“高”
},
{
“标题”：“普雷斯米多之父”，
“描述”：“Fonte atualizada mensalmente.”，
“谐音”：假，
“临界性”：“中等”
}
]
}]
};
新Vue({
el:“#应用程序”，
数据（）{
返回{
searchQuery:“”，
政策规则
}
},
计算：{
filteredPolicyRules（）{
if（this.searchQuery）{
返回this.policyRules.group.reduce（（组，{name，rule}）=>{
常量规则=rule.filter（this.matchFilter）；
如果（规则长度>0）{
推({
名称
规则
});
}
返回组；
}, []);
}
返回此.policyRules；
}
},
方法：{
匹配过滤器（项目）{
常数
search=this.searchQuery.toLowerCase（），
term=（item.title | |“”）.toLowerCase（）；
返回术语。包括（搜索）；
}
}
});

{{filteredPolicyRules}}
首先，我将您的列表放入一个
映射
变量中。然后我通过检查任何想要的属性是否包含搜索词来过滤它。
array.filter
方法根据返回true和false的条目返回一个新数组

我正在检查里面的名字，标题和描述。而且我把所有的东西都简化了，所以大小写不重要


我还建议像Yom一样在他的回答中使用
组
和
规则
，以便更好地命名它们。因此，这将是
groups.filter（group=>{[…]}）
和
for（group.rules的常量规则）
您可以添加预期输出的示例吗？是的，编辑完成！我真的不明白。您向我们展示了输出应该是什么，但是未过滤的数组实际上是什么样子的？上面的版本中没有所需的条目。对不起，我没有看到对象不同，我又做了一个版本！工作很好，但是我有一个问题，当我清理搜索字段时，我需要恢复原始对象，但它没有发生，发生的是我保留过滤的数据。你知道吗，我实际上错过了一个
return
关键字。查看我上面的小编辑，让我知道这是否解决了你的问题。返回“精简”副本，因此不应修改原始数据。也就是说，如果你选择使用我的方法，你就不再需要这个对象
filteredRules
。工作得很好，谢谢！我不知道reduce这个概念，它非常有帮助。谢谢你的回答，我使用了你的字符验证！！
{
  "name": "Cadastral",
  "rule": [
    {
      "title": "Receita Federal",
      "description": "Fonte atualizada mensalmente.",
      "homonym": false,
      "criticality": "high"
    },
  ]
},

filteredPolicyRules() {
  if (this.searchQuery) {
    return this.policyRules.group.reduce((groups, { name, rule }) => {
      const rules = [];

      rule.forEach(r => {
        if (r.title.startsWith(this.searchQuery)) {
          rules.push(r);
        }
      });

      if (rules.length > 0) {
        groups.push({
          name,
          rules
        });
      }

      return groups;
    }, []);
  }

  return this.policyRules;
}


const term = 'CNE';

console.log(map.filter(e => {
  const { name } = e;
  if(contains(name, term)) return true;

  for(const _r of e.rule) {
    const { title, description } = _r;
    if(contains(title, term)) return true;
    if(contains(description, term)) return true;
  }
  return false;
}));

function contains(str, term) {
  return str.toLowerCase().includes(term.toLowerCase());
}