我也想过滤嵌套的JSON包含数组

时间:2019-03-04 08:13:43

标签: angular typescript pipe

{
    "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"
                    }
                ]
            }
        ]
    }
} 

上面是我的json对象。我有三个下拉菜单:月,作物列表和状态列表。我想编写一个过滤器函数,例如,如果我选择month = 3 croplist =“ Ajwan”和state =“ gujrat”,那么它将显示在通知数组的结果下面

 {
                "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"
                    }
                ]
            } 

我可以使用管道中的以下代码通过选择月份和作物列表来获得结果

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)
}

1 个答案:

答案 0 :(得分:0)

您的管道当前只能过滤直接通知属性,而不能过滤嵌套属性。因此,传递诸如[{stateName:stateDistValue}]之类的对象数组不适用于当前的实现。

可能很难更改实现以适应这种用法。

相反,我建议采用如下结构:

interface PropFilter {
  path: string[];
  value: any;
}

这里的技巧是path,它使访问嵌套属性变得容易。 您可以为此功能编写一个辅助函数:

function getDeep(obj: object, path: string[]) {
  let res: any = obj;
  for (const prop of path) {
    if (!res)
      return undefined;
    res = res[prop];
  }
  return res;
}

我们想将PropFilter对象的数组传递到管道中,例如:

this.objflt.transform(this.newList, [
  { path: ["month"], value: monthValue },
  { path: ["statesAndDis", "stateName"], value: stateDistValue },
  { path: ["croptypes"], value: croptypeValue }
]);

剩下要做的就是相应地更改管道。 像这样:

transform(value: any, args?: PropFilter[]): any {
  return !value || !args
    ? value
    : value.filter(obj => args.every(
      ({ path, value }) => new RegExp(value).test(getDeep(obj, path))
    ));
}