Javascript 使用对象中的多个值筛选对象数组

因此，我有一个如下所示的对象数组：

let medicines = [
 {
   id:3340,
   name:nutraplus,
   description:"some medicine",
   ingredients: [{
         ingredient:"glycerol"
         },
         {
          ingredient:"Morphine"
         }
        ]
  },
   {
   id:3320,
   name:Panadol,
   description:"tablet",
   ingredients: [{
         ingredient:"Paracetamol"
         },
         {
          ingredient:"Some stuff"
         }
        ]
  }
]

edicines() {
    return this.$store.state.medicines.filter(med => {
        return med.name.toLowerCase().includes(this.search.toLowerCase()) || med.ingredients.map(ing=>{
            ing.ingredient.name.toLowerCase().includes(this.search.toLower)
        })
    })
}

我希望能够通过名称和成分名称进行过滤，我通过这样做实现了前者：

computed: {
    medicines() {
        return this.$store.state.medicines.filter(med => {
            //this.search is the what comes after typing in search bar
            return med.name.toLowerCase().includes(this.search.toLowerCase())
        })
    },
}

它的vue.js所以computed（）的东西无论如何这在按名称搜索时非常有效，但是我也希望能够从同一搜索栏按成分搜索。我试过这样的方法：

let medicines = [
 {
   id:3340,
   name:nutraplus,
   description:"some medicine",
   ingredients: [{
         ingredient:"glycerol"
         },
         {
          ingredient:"Morphine"
         }
        ]
  },
   {
   id:3320,
   name:Panadol,
   description:"tablet",
   ingredients: [{
         ingredient:"Paracetamol"
         },
         {
          ingredient:"Some stuff"
         }
        ]
  }
]

edicines() {
    return this.$store.state.medicines.filter(med => {
        return med.name.toLowerCase().includes(this.search.toLowerCase()) || med.ingredients.map(ing=>{
            ing.ingredient.name.toLowerCase().includes(this.search.toLower)
        })
    })
}

但它不起作用。有什么办法让它工作吗？谢谢您的时间。

这应该行得通

let medicines=[
{
身份证号码：3340，
名称：“海狸鼠”，
描述：“一些药”，
成分：[{
成分：“甘油”
},
{
成分：“吗啡”
}
]
},
{
身份证号码：3320，
名称：“Panadol”，
说明：“平板电脑”，
成分：[{
成分：“扑热息痛”
},
{
成分：“一些东西”
}
]
}
];
const searchPhrase=“扑热息痛”；
const filteredByName=medicines.filter（（medicine）=>{
return medicine.name.toLowerCase（）==searchPhrase.toLowerCase（）；
});
const FilteredBingCredit=药物。过滤器（（药物）=>{
返回medicine.components.some（（item）=>item.component.toLowerCase（）==searchPhrase.toLowerCase（））；
})
常量结果=[…filteredByName，…FilteredBygCredit]；
console.log（result）

在示例中没有使用vue，您只需要提取我所做的过滤（简单JS过滤）背后的逻辑

举例来说-

尝试搜索“Para”—它必须返回包含Para的名称/成分的条目

尝试搜索“原料””-它应该返回两个条目（因为该数组中的两种药物都包含“某些原料”作为成分）

let medicines=[{
身份证号码：3340，
名称：'nutraplus'，
描述：“一些药”，
成分：[{
成分：“甘油”
},
{
成分：“吗啡”
},
{
成分：“一些东西”
}
]
},
{
身份证号码：3320，
名称：“Panadol”，
说明：“平板电脑”，
成分：[{
成分：“扑热息痛”
},
{
成分：“一些东西”
}
]
},
{
身份证号码：3311，
名称：“亚马逊”，
说明：“平板电脑”
}
];
const form=document.querySelector（'form'）
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
const searchValue=form.searchText.value.toLowerCase（）；
常量匹配值=medicines.filter（medicine=>{
返回medicine.name.toLowerCase（）.includes（searchValue）| |（medicine.components？medicine.components.filter（ingredientObj=>{
返回ingredientObj.Component.toLowerCase（）.includes（searchValue）；
}).长度>0：错误）；
});
document.querySelector（'.result'）.textContent=JSON.stringify（matchValue，null，4）；
});
pre{
背景：#C5C5；
}

搜寻
使用
map（）
是错误的作业工具。它总是返回一个新数组，该数组总是真实的。尝试
some（）
或
find（）
。另外，
this.search.toLower
也是无效的，在您的数据中，
成分
是一个字符串，但您试图将其作为代码中的对象访问。尝试将其更改为
ing.component.toLowerCase（）.includes（this.search.toLowerCase（））
。那么您是说| |条件是正确的？就像我应该改变地图来寻找一样？虽然没什么效果，但我还是投了你的票；）谢谢