How to do filter search in react js / JS?
I have a component where I am displaying product details on card e.g (producctId, amounts,natureAndContentsOfContainer,packagingDetails,unitOfMeasure,primaryContainerType,DispensingMode, Ingredient,dosageForm,packSize, productCategoty, productType, strengthPerUnit, tradeName, pic1) and I also want to filter search on Ingredient and dosageForm paramenter only. When I fetch data from API I get this array:
[
{
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",
},
},
];
Note: I write only 3 product details. It can be 100+ as well.
Note: Searching parameters are Ingredient & dosageForm.
Now I want that if user search about Ingredient or dosageForm in search bar if data found then only show those arrays that contains searched input data and other data should be neglected.