如何在react js/js中进行过滤器搜索？我有一个组件，可以在卡片上显示产品详细信息，例如(productId、amount、natureAndContentsOfContainer、packagingDetails、unitOfMeasure、primaryContainerType、DispensingMode、Ingredient、dosageForm、packSize、productCategory、productType、strengthPerUnit、tradeName、pic1(，我还想只在Ingredient和dosageForm参数中过滤搜索。当我从API获取数据时，我得到了这个数组：
[
{
supplier: {
companyName: "Asad",
id: "61f0f796cc53c565a15e31a3",
},
productId: "6213738798dbb2ecf4c23ddd",
productDetails: {
amounts: "%3 v/v",
barcodePrinted: true,
dosageForm: "tablet",
gtinNumber: "09567214",
api: {
name: "AMITRIPTYLINE",
countryOfOrigin: "pakistan",
approvedBy: "us_fda",
},
coloringAgents: { values: Array(0) },
listOfExcipients: [],
natureAndContentsOfContainer: "containing 0.5ml solution",
packSize: "10 tablets",
packagingDetails: "pack of 3 strips each with 10 tablets",
pic1: "",
pic2: "",
pilLanguage: "english",
primaryContainerType: "blister",
strengthPerUnit: "10 mg",
tradeName: "WELLTRIP",
unitOfMeasure: "1 k",
_id: "6213738798dbb2ecf4c23de0",
},
},
{
supplier: { id: "61f0edffb71dc157de9f7369", companyName: "abc" },
productId: "623079ef4c177018a57963f0",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient:
" Riboflavin, Selenium, citrus bioflavonoids, copper, Vitamin A, Vitamin B6, Pantothenic acid, Vitamin E, Vitamin B12, Zinc, chromium, carotenoids, Folic acid, biotin, Iron, Magnesium, Manganese, Niacin, Thiamine, Vitamin d, grape seed , Flaxseed Oil, Vitamin C, iodine",
coloringAgents: { values: Array(0) },
dosageForm: "Tablet",
listOfExcipients: [],
packSize: "30 Tablet",
preservatives: { values: Array(0) },
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "WELLKID IMMUNE CHEWABLE ",
_id: "623079ef4c177018a57963f3",
},
},
{
supplier: { id: "61f0edffb71dc157de9f7369", companyName: "xyz" },
productId: "623079ef4c177018a57963ee",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient: " lactobacillus acidophilus",
coloringAgents: { values: Array(0) },
dosageForm: "Capsule",
listOfExcipients: [],
packSize: "15 Capsule",
preservatives: { values: Array(0) },
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "LACTOBIOTIX",
_id: "623079ef4c177018a57963f6",
},
},
];注意：我只写了3个产品细节。它也可以是100+。
注意：搜索参数为Ingredient&dosageForm。
现在我希望，如果用户在搜索栏中搜索Ingredient或dosageForm，如果找到了数据，那么只显示那些包含搜索输入数据的数组，而其他数据应该被忽略。
在花了太多时间之后，我终于解决了这个问题。解决方案在javaScript中，如下所示：
const data = [
{
supplier: {
companyName: "Asad",
id: "61f0f796cc53c565a15e31a3",
},
productId: "6213738798dbb2ecf4c23ddd",
productDetails: {
amounts: "%3 v/v",
barcodePrinted: true,
dosageForm: "tablet",
gtinNumber: "09567214",
api: {
name: "AMITRIPTYLINE",
countryOfOrigin: "pakistan",
approvedBy: "us_fda",
},
coloringAgents: { values: Array(0) },
listOfExcipients: [],
natureAndContentsOfContainer: "containing 0.5ml solution",
packSize: "10 tablets",
packagingDetails: "pack of 3 strips each with 10 tablets",
pic1: "",
pic2: "",
pilLanguage: "english",
primaryContainerType: "blister",
strengthPerUnit: "10 mg",
tradeName: "WELLTRIP",
unitOfMeasure: "1 k",
_id: "6213738798dbb2ecf4c23de0",
},
},
{
supplier: { id: "61f0edffb71dc157de9f7369", companyName: "abc" },
productId: "623079ef4c177018a57963f0",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient:
" Riboflavin, Selenium, citrus bioflavonoids, copper, Vitamin A, Vitamin B6, Pantothenic acid, Vitamin E, Vitamin B12, Zinc, chromium, carotenoids, Folic acid, biotin, Iron, Magnesium, Manganese, Niacin, Thiamine, Vitamin d, grape seed , Flaxseed Oil, Vitamin C, iodine",
coloringAgents: { values: Array(0) },
dosageForm: "Tablet",
listOfExcipients: [],
packSize: "30 Tablet",
preservatives: { values: Array(0) },
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "WELLKID IMMUNE CHEWABLE ",
_id: "623079ef4c177018a57963f3",
},
},
{
supplier: { id: "61f0edffb71dc157de9f7369", companyName: "xyz" },
productId: "623079ef4c177018a57963ee",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient: "lactobacillus acidophilus",
coloringAgents: { values: Array(0) },
dosageForm: "Capsule",
listOfExcipients: [],
packSize: "15 Capsule",
preservatives: { values: Array(0) },
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "LACTOBIOTIX",
_id: "623079ef4c177018a57963f6",
},
},
];
const includedParameters = [
"Ingredient",
"dosageForm",
];
let value = "copper";
const lowerCaseValue = value.toLowerCase().trim();
if (!lowerCaseValue) {
console.log("Not lowercase value!");
} else {
const filterSearch = data.filter((item, index) => {
return Object.keys(data[index]?.productDetails)?.some((key) => {
return includedParameters.includes(key)
? item?.productDetails[key]?.toString().toLowerCase().includes(lowerCaseValue)
: false;
});
});
console.log(filterSearch);
}通过dosageForm过滤
const dosageFormTerm = "Capsule" // dosageForm filter value
products.filter(({ productDetails: { dosageForm } }) => dosageForm === dosageFormTerm)
通过成分过滤
const ingredientTerm = "lactobacillus" // ingredient filter value
products.filter(({ productDetails: { Ingredient } }) => Ingredient ? Ingredient.includes(ingredientTerm) : false)
通过剂量表和成分过滤
const searchTerm = {
dosageForm: "Capsule", // dosageForm filter value
ingredient: "lactobacillus" // ingredient filter value
}
products.filter(({ productDetails: { dosageForm, Ingredient } }) => Ingredient ? Ingredient.includes(searchTerm.ingredient) && dosageForm === searchTerm.dosageForm : false)
请参阅下面的实现。它只用于搜索配料。您可以为dosageForm构建相同的解决方案。单个搜索框既可用于项目搜索，也可用于每个项目的单独搜索框。
完整代码：
import React, {useState} from "react";
let initState = [{
supplier: {
companyName: "Asad",
id: "61f0f796cc53c565a15e31a3",
},
productId: "6213738798dbb2ecf4c23ddd",
productDetails: {
amounts: "%3 v/v",
barcodePrinted: true,
dosageForm: "tablet",
gtinNumber: "09567214",
api: {
name: "AMITRIPTYLINE",
countryOfOrigin: "pakistan",
approvedBy: "us_fda",
},
coloringAgents: {
values: Array(0)
},
listOfExcipients: [],
natureAndContentsOfContainer: "containing 0.5ml solution",
packSize: "10 tablets",
packagingDetails: "pack of 3 strips each with 10 tablets",
pic1: "",
pic2: "",
pilLanguage: "english",
primaryContainerType: "blister",
strengthPerUnit: "10 mg",
tradeName: "WELLTRIP",
unitOfMeasure: "1 k",
_id: "6213738798dbb2ecf4c23de0",
},
}, {
supplier: {
id: "61f0edffb71dc157de9f7369",
companyName: "abc"
},
productId: "623079ef4c177018a57963f0",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient: " Riboflavin, Selenium, citrus bioflavonoids, copper, Vitamin A, Vitamin B6, Pantothenic acid, Vitamin E, Vitamin B12, Zinc, chromium, carotenoids, Folic acid, biotin, Iron, Magnesium, Manganese, Niacin, Thiamine, Vitamin d, grape seed , Flaxseed Oil, Vitamin C, iodine",
coloringAgents: {
values: Array(0)
},
dosageForm: "Tablet",
listOfExcipients: [],
packSize: "30 Tablet",
preservatives: {
values: Array(0)
},
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "WELLKID IMMUNE CHEWABLE ",
_id: "623079ef4c177018a57963f3",
},
},
{
supplier: {
id: "61f0edffb71dc157de9f7369",
companyName: "xyz"
},
productId: "623079ef4c177018a57963ee",
productDetails: {
DispensingMode: "Pharmacy Only (P)",
Ingredient: " lactobacillus acidophilus",
coloringAgents: {
values: Array(0)
},
dosageForm: "Capsule",
listOfExcipients: [],
packSize: "15 Capsule",
preservatives: {
values: Array(0)
},
productCategoty: "Registered",
productType: "cosmatics",
strengthPerUnit: "Combination",
tradeName: "LACTOBIOTIX",
_id: "623079ef4c177018a57963f6",
},
}, ];
export default function App() {
const [itm, setItm] = useState();
const [filteredItms, setfilteredItms] = useState([]);
return (
<div>
<label>Search by Ingredients</label>
<input type="text" value={itm} onChange={({target})=>{
let fil = initState.filter(s => {
if (s.productDetails.Ingredient){
let theIng = s.productDetails.Ingredient.toLocaleLowerCase();
let val = target.value.toLocaleLowerCase()
let fi = theIng.match(val) !== null && theIng.match(val)[0] !== "" && theIng.match(val)[0].length >= 2
return fi
}
})
setfilteredItms(fil)
}}/>
<p>Search result</p>
<ul>
{filteredItms.map(itm => <li>{itm.productId}</li>)}
</ul>
</div>
);
}
通过多个字段过滤对象数组的另一种方法：
const data = [{"supplier":{"companyName":"Asad","id":"61f0f796cc53c565a15e31a3"},"productId":"6213738798dbb2ecf4c23ddd","productDetails":{"amounts":"%3 v/v","barcodePrinted":true,"dosageForm":"tablet","gtinNumber":"09567214","api":{"name":"AMITRIPTYLINE","countryOfOrigin":"pakistan","approvedBy":"us_fda"},"coloringAgents":{"values":Array(0)},"listOfExcipients":[],"natureAndContentsOfContainer":"containing 0.5ml solution","packSize":"10 tablets","packagingDetails":"pack of 3 strips each with 10 tablets","pic1":"","pic2":"","pilLanguage":"english","primaryContainerType":"blister","strengthPerUnit":"10 mg","tradeName":"WELLTRIP","unitOfMeasure":"1 k","_id":"6213738798dbb2ecf4c23de0"}},{"supplier":{"id":"61f0edffb71dc157de9f7369","companyName":"abc"},"productId":"623079ef4c177018a57963f0","productDetails":{"DispensingMode":"Pharmacy Only (P)","Ingredient":" Riboflavin, Selenium, citrus bioflavonoids, copper, Vitamin A, Vitamin B6, Pantothenic acid, Vitamin E, Vitamin B12, Zinc, chromium, carotenoids, Folic acid, biotin, Iron, Magnesium, Manganese, Niacin, Thiamine, Vitamin d, grape seed , Flaxseed Oil, Vitamin C, iodine","coloringAgents":{"values":Array(0)},"dosageForm":"Tablet","listOfExcipients":[],"packSize":"30 Tablet","preservatives":{"values":Array(0)},"productCategoty":"Registered","productType":"cosmatics","strengthPerUnit":"Combination","tradeName":"WELLKID IMMUNE CHEWABLE ","_id":"623079ef4c177018a57963f3"}},{"supplier":{"id":"61f0edffb71dc157de9f7369","companyName":"xyz"},"productId":"623079ef4c177018a57963ee","productDetails":{"DispensingMode":"Pharmacy Only (P)","Ingredient":"lactobacillus acidophilus","coloringAgents":{"values":Array(0)},"dosageForm":"Capsule","listOfExcipients":[],"packSize":"15 Capsule","preservatives":{"values":Array(0)},"productCategoty":"Registered","productType":"cosmatics","strengthPerUnit":"Combination","tradeName":"LACTOBIOTIX","_id":"623079ef4c177018a57963f6"}}]
const value = "copper";
const filterSearch = data.filter(({ productDetails }) =>
[productDetails.Ingredient ?? '', productDetails.dosageForm ?? '']
.join(' ')
.toLowerCase()
.includes(value));
console.log(filterSearch);.as-console-wrapper { max-height: 100% !important; top: 0; }