Angular 我想过滤嵌套的JSON，它也包含一个数组
上面是我的json对象。我有三个下拉列表：月、croplist和statelist。我想写一个过滤函数，例如，如果我选择了month=3 croplist=“Ajwan”和state=“gujrat”，那么它应该显示下面来自通知数组的结果Angular 我想过滤嵌套的JSON，它也包含一个数组,angular,typescript,pipe,Angular,Typescript,Pipe,上面是我的json对象。我有三个下拉列表：月、croplist和statelist。我想写一个过滤函数，例如，如果我选择了month=3 croplist=“Ajwan”和state=“gujrat”，那么它应该显示下面来自通知数组的结果 { "data": { "typeList": [ { "name": "Important"
{
"data": {
"typeList": [
{
"name": "Important"
},
{
"name": "Govt"
},
{
"name": "Bank"
},
{
"name": "Other"
}
],
"cropList": [
"Ajwan",
"Alasande Gram",
"Alsandikai",
"Amaranthus",
"Amla(Nelli Kai)",
"Amphophalus",
"Apple",
"Arecanut(Betelnut/Supari)",
"Arhar (Tur/Red Gram)(Whole)",
"Arhar Dal(Tur Dal)",
"Ashgourd",
"Avare Dal",
"BOP",
"Bajra(Pearl Millet/Cumbu)",
"Banana",
"Banana - Green",
"Barley (Jau)",
"Beans",
"Beaten Rice",
"Beetroot",
"Bengal Gram Dal (Chana Dal)",
"Bengal Gram(Gram)(Whole)",
"Ber(Zizyphus/Borehannu)",
"Betal Leaves",
"Bhindi(Ladies Finger)",
"Bitter gourd",
"Black Gram (Urd Beans)(Whole)",
"Black Gram Dal (Urd Dal)",
"Black pepper",
"Borehannu",
"Bottle gourd",
"Bran",
"Brinjal",
"Broken Rice",
"Bunch Beans",
"Cabbage",
"Capsicum",
"Cardamoms",
"Carnation",
"Carrot",
"Cashewnuts",
"Castor Seed",
"Cauliflower",
"Chapparad Avare",
"Chennangi Dal",
"Chikoos(Sapota)",
"Chili Red",
"Chilly Capsicum",
"Chow Chow",
"Cloves",
"Cluster beans",
"Coca",
"Cock",
"Coconut",
"Coconut Oil",
"Coconut Seed",
"Coffee",
"Colacasia",
"Copra",
"Coriander(Leaves)",
"Corriander seed",
"Cotton",
"Cowpea (Lobia/Karamani)",
"Cowpea(Veg)",
"Cucumbar(Kheera)",
"Cummin Seed(Jeera)",
"Dalda",
"Delha",
"Dhaincha",
"Drumstick",
"Dry Chillies",
"Dry Fodder",
"Dry Grapes",
"Duck",
"Duster Beans",
"Egg",
"Elephant Yam (Suran)",
"Field Pea",
"Firewood",
"Fish",
"Foxtail Millet(Navane)",
"French Beans (Frasbean)",
"Galgal(Lemon)",
"Garlic",
"Ghee",
"Gingelly Oil",
"Ginger(Dry)",
"Ginger(Green)",
"Gladiolus Cut Flower",
"Goat",
"Gram Raw(Chholia)",
"Grapes",
"Green Avare (W)",
"Green Chilli",
"Green Fodder",
"Green Gram (Moong)(Whole)",
"Green Gram Dal (Moong Dal)",
"Green Peas",
"Ground Nut Seed",
"Groundnut",
"Groundnut (Split)",
"Groundnut pods (raw)",
"Guar",
"Guar Seed(Cluster Beans Seed)",
"Guava",
"Gur(Jaggery)",
"Hen",
"Honge seed",
"Hybrid Cumbu",
"Indian Beans (Seam)",
"Indian Colza(Sarson)",
"Isabgul (Psyllium)",
"Jack Fruit",
"Jarbara",
"Jasmine",
"Jowar(Sorghum)",
"Jute",
"Kabuli Chana(Chickpeas-White)",
"Karbuja(Musk Melon)",
"Kinnow",
"Knool Khol",
"Kodo Millet(Varagu)",
"Kulthi(Horse Gram)",
"Lak(Teora)",
"Leafy Vegetable",
"Lemon",
"Lentil (Masur)(Whole)",
"Lilly",
"Lime",
"Linseed",
"Little gourd (Kundru)",
"Long Melon(Kakri)",
"Lotus Sticks",
"Mace",
"Mahua",
"Mahua Seed(Hippe seed)",
"Maida Atta",
"Maize",
"Mango",
"Mango (Raw-Ripe)",
"Marigold(Calcutta)",
"Mashrooms",
"Masur Dal",
"Mataki",
"Methi Seeds",
"Methi(Leaves)",
"Millets",
"Mint(Pudina)",
"Moath Dal",
"Mousambi(Sweet Lime)",
"Mustard",
"Mustard Oil",
"Neem Seed",
"Niger Seed (Ramtil)",
"Nutmeg",
"Onion",
"Onion Green",
"Orange",
"Orchid",
"Paddy(Dhan)(Basmati)",
"Paddy(Dhan)(Common)",
"Papaya",
"Papaya (Raw)",
"Patti Calcutta",
"Pear(Marasebu)",
"Peas Wet",
"Peas cod",
"Peas(Dry)",
"Pegeon Pea (Arhar Fali)",
"Pepper garbled",
"Pepper ungarbled",
"Pigs",
"Pineapple",
"Plum",
"Pointed gourd (Parval)",
"Pomegranate",
"Potato",
"Pumpkin",
"Raddish",
"Ragi (Finger Millet)",
"Raibel",
"Rajgir",
"Rat Tail Radish (Mogari)",
"Rice",
"Ridgeguard(Tori)",
"Rose(Local)",
"Round gourd",
"Rubber",
"Safflower",
"Sajje",
"Season Leaves",
"Seemebadnekai",
"Seetapal",
"Sesamum(Sesame,Gingelly,Til)",
"Sheep",
"Snakeguard",
"Soanf",
"Soji",
"Soyabean",
"Spinach",
"Sponge gourd",
"Squash(Chappal Kadoo)",
"Sugar",
"Sunflower",
"Surat Beans (Papadi)",
"Suva (Dill Seed)",
"Suvarna Gadde",
"Sweet Potato",
"Sweet Pumpkin",
"T.V. Cumbu",
"Tamarind Fruit",
"Tamarind Seed",
"Tapioca",
"Taramira",
"Tender Coconut",
"Thinai (Italian Millet)",
"Thondekai",
"Tinda",
"Tobacco",
"Tomato",
"Tube Rose(Double)",
"Tube Rose(Single)",
"Turmeric",
"Turmeric (raw)",
"Turnip",
"Water Melon",
"Wheat",
"Wheat Atta",
"White Peas",
"White Pumpkin",
"Wood",
"Yam",
"Yam (Ratalu)"
],
"notifications": [
{
"description": "sansjd",
"date": "20-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Alasande Gram",
"Ajwan",
"Ajwan"
],
"notificationDetailsId": 953,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date": "20-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Ajwan",
"Ajwan",
"Alasande Gram"
],
"notificationDetailsId": 1010,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
}
]
},
{
"description": "sansjd",
"date": "20-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Alasande Gram",
"Ajwan",
"Ajwan"
],
"notificationDetailsId": 1052,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date": "19-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alsandikai",
"Ajwan",
"Alasande Gram"
],
"notificationDetailsId": 1002,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Kozhikode(Calicut)"
],
"stateName": "Kerala"
},
{
"districtName": [
"Gandhinagar"
],
"stateName": "Gujarat"
}
]
},
{
"description": "sndnds",
"date": "13-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alsandikai",
"Ajwan",
"Ajwan"
],
"notificationDetailsId": 954,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"East Khasi Hills"
],
"stateName": "Meghalaya"
}
]
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date": "13-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alsandikai",
"Amaranthus",
"Alasande Gram"
],
"notificationDetailsId": 1005,
"isPublished": true,
"statesAndDis": [
{
"districtName": [
"Kozhikode(Calicut)"
],
"stateName": "Kerala"
}
]
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date": "12-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alasande Gram",
"Alsandikai",
"Alasande Gram"
],
"notificationDetailsId": 1004,
"isPublished": true,
"statesAndDis": [
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
"date": "05-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alasande Gram",
"Amaranthus",
"Amaranthus"
],
"notificationDetailsId": 1003,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Last fall’s harvest was challenging for a lot of Missouri’s farmers. Andy Luke, a University of Missouri Extension agronomist based in Harrison County, in northwest Missouri, says wet weather slowed harvest progress, even preventing some fields from being harvested.",
"date": "04-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alasande Gram",
"Alasande Gram",
"Alasande Gram"
],
"notificationDetailsId": 1952,
"isPublished": true,
"statesAndDis": [
{
"districtName": [
"East Khasi Hills"
],
"stateName": "Meghalaya"
},
{
"districtName": [
"Kozhikode(Calicut)"
],
"stateName": "Kerala"
},
{
"districtName": [
"Ernakulam"
],
"stateName": "Kerala"
}
]
},
{
"description": "Palmer amaranth is the pigweed species that rightfully earns the most consternation from Midwest farmers. But don’t forget that waterhemp can be just as invasive and contains many of the same characteristics as Palmer.\n\nThat’s the take-home message from Brian Jenks, weed specialist at North Dakota State University, during the annual Ag Horizons Conference in Pierre, South Dakota, on November 26.\n\n“From the Dakotas, through Iowa, Illinois, and Indiana and across the Midwest, waterhemp is becoming a huge problem,” warns Jenks.",
"date": "02-03-2019",
"month": "3",
"type": "Important",
"croptypes": [
"Alsandikai",
"Alasande Gram",
"Ajwan"
],
"notificationDetailsId": 1007,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Kozhikode(Calicut)"
],
"stateName": "Kerala"
},
{
"districtName": [
"Gandhinagar"
],
"stateName": "Gujarat"
}
]
},
{
"description": "An aid of Rs. 1,507 crore has been credited into bank accounts of 42 lakh drought-affected farmers, Maharashtra Finance Minister Sudhir Mungantiwar said on Wednesday. He said Rs. 2,909 crore have been allocated for this purpose.\nPresenting a vote-on-account in the Legislative Assembly, Mr Mungantiwar said 82,27,166 farmers in 151 tehsils with land holding of 85.76 lakh hectares have been affected by drought.",
"date": "02-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Alasande Gram",
"Ajwan",
"Ajwan"
],
"notificationDetailsId": 1008,
"isPublished": true,
"statesAndDis": [
{
"districtName": [
"Anand",
"Amreli"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
}
]
},
{
"description": "An aid of Rs. 1,507 crore has been credited into bank accounts of 42 lakh drought-affected farmers, Maharashtra Finance Minister Sudhir Mungantiwar said on Wednesday. He said Rs. 2,909 crore have been allocated for this purpose.\nPresenting a vote-on-account in the Legislative Assembly, Mr Mungantiwar said 82,27,166 farmers in 151 tehsils with land holding of 85.76 lakh hectares have been affected by drought.",
"date": "02-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Ajwan",
"Ajwan",
"Alasande Gram"
],
"notificationDetailsId": 1009,
"isPublished": true,
"statesAndDis": [
{
"districtName": [
"Amreli",
"Anand"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Anand",
"Amreli"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Test",
"date": "12-02-2019",
"month": "2",
"type": "Important",
"croptypes": [
"Alasande Gram",
"Alasande Gram",
"Alsandikai"
],
"notificationDetailsId": 1,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
}
]
},
{
"description": "Test",
"date": "12-02-2019",
"month": "2",
"type": "Govt",
"croptypes": [
"Alasande Gram",
"Alasande Gram",
"Alsandikai"
],
"notificationDetailsId": 2,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
}
]
},
{
"description": "english desc",
"date": "30-01-2019",
"month": "1",
"type": "Important",
"croptypes": [
"Cowpea (Lobia/Karamani)",
"Karbuja(Musk Melon)",
"Pointed gourd (Parval)"
],
"notificationDetailsId": 1103,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Banaskanth",
"Amreli",
"Anand"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Baghpat",
"Bahraich",
"Bareilly"
],
"stateName": "Uttar Pradesh"
},
{
"districtName": [
"Dindigul",
"Kancheepuram",
"Coimbatore"
],
"stateName": "Tamil Nadu"
}
]
}
]
}
}
{
"description": "sansjd",
"date": "20-03-2019",
"month": "3",
"type": "Bank",
"croptypes": [
"Alasande Gram",
"Ajwan",
"Ajwan"
],
"notificationDetailsId": 953,
"isPublished": false,
"statesAndDis": [
{
"districtName": [
"Anand"
],
"stateName": "Gujarat"
},
{
"districtName": [
"Amreli"
],
"stateName": "Gujarat"
}
]
}
从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“objectFilter”
})
导出类ObjectFilterPipe实现PipeTransform{
转换（值：any，args？：any）：any{
如果（Object.keys（args）.length您的管道当前只能过滤直接通知属性，而不能过滤嵌套的属性。因此，传递对象数组，如[{stateName:stateDistValue}]
在当前实现中不起作用
可能很难改变实现来适应这种用法
相反，我建议采用如下结构：
接口过滤器{
路径：字符串[]；
价值：任何；
}
这里的技巧是路径
，它使访问嵌套属性变得容易。
您可以为该功能编写帮助器函数：
函数getDeep（obj:object，path:string[]）{
设res:any=obj；
for（路径的常量属性）{
如果（！res）
返回未定义；
res=res[prop]；
}
返回res；
}
PropFilterthis.objflt.transform（this.newList[
{path:[“month”]，值：monthValue}，
{路径：[“statesAndDis”，“stateName”]，值：stateDistValue}，
{路径：[“croptypes”]，值：croptypeValue}
]);
transform（值：any，args？：PropFilter[]）：any{
return！value | |！args
价值
：value.filter（obj=>args.every(
（{path，value}）=>newregexp（value.test（getDeep（obj，path））
));
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'objectFilter'
})
export class ObjectFilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(Object.keys(args).length<1){
return false;
}
else {
return value.filter(function(obj) {
return Object.keys(args).every(function(c) {
return new RegExp(args[c]).test(obj[c]);
});
});
}
}
}
filterSelection() {
let monthValue = this.monthControl.value;
let stateDistValue = this.statedistControl.value;
let croptypeValue = this.croptypeControl.value;
let crpArr: Array<any> = []
let statedisarray:Array<any>=[]
if (monthValue == null || monthValue == 0) {
monthValue = ''
}
if (stateDistValue == null || stateDistValue == "All") {
stateDistValue = ''
}
if (croptypeValue == null || croptypeValue == "All") {
croptypeValue = ''
}
crpArr.push(croptypeValue)
this.notificationList = this.objflt.transform(this.newList, { month: monthValue,statesAndDis:[{stateName:stateDistValue}], croptypes: crpArr })
console.log("After Filter ----",this.notificationList)
}