javascript - 如何遍历对象,仅显示与其所有元素相互的结果
问题描述
我正在制作一个简单的应用程序,在 Angular7 上编写,它获取产品的输入(例如“苹果橙草莓”)并显示包含所有产品作为成分的食谱。所需的一切,如食谱、配料等都保存在 JSON 文件中。它仅在我有一个产品作为输入时才有效。问题是我想遍历输入中的所有成分并显示食谱,哪些成分具有所有产品。
这是 JSON 文件的对象的样子:
{
"id": 1,
"name": "some name",
"ingredients": "some ingredients",
"recipe": "some recipe"
}
这就是我将输入作为对象获取然后将其拆分以便获取每种成分的方式:
this.pattern = this.searchForm.value;
this.patternObj = this.pattern.name.split(" ");
这就是我过滤和收集具有特定成分的元素的方式:
this.result = res.filter(v => v.ingredients.indexOf(this.patternObj) > -1);
我试图 foreach patternObj,但在这种情况下,它只显示对象最后一个产品的配方。
解决方案
您应该使用该函数some
来检查至少一个元素,并使用该函数includes
检查目标数组中是否存在一个元素。
this.result = res.filter(v => v.ingredients.some(ing => this.patternObj.includes(ing)));
推荐阅读
- azure - Azure 函数和容器审计
- openstack - 手动 Openstack 安装:警告:...没有服务“身份”的策略规则
- python - TypeError: 'dict' 和 'int' 的实例之间不支持'>='
- angular - 需要登录时的应用程序路由方法导致每次加载时出现白屏和登录屏幕
- c++ - 将 CLI ImageMagick 转换为 Magick++:阈值和深度
- php - 尝试连接到 google sheet api 时出现奇怪的 php 错误
- react-native - react-native 底部导航器没有完全隐藏底部标签,它正在向上
- scala - 了解 kafka poll 并获取整个数据
- typescript - vue-class-component 语法中 vue-models(因此,“props”)的计算 getter/setter
- c++ - (C++):存储和访问用户登录数据的问题