Filter Nested array of objects in angular java script

Question

Hi I am Having following array. I want to filter this array depending on user input.I have search it on internet gone through many solutions on stack overflow i have also gone through documentation of array but i didn't get any solution. Please Help...

{
  "data": [
    {
      "categoryId": "1",
      "categoryName": "Pens",
      "subcat": [
        {
          "SubCatId": "1",
          "SubCategoryName": "Classic Cakes",
          "item": [
            {
              "DisplayName": "Excellent 500gms",
              "ItemData": {
                "ItemName": "Excellent"
              }
            },
            {
              "DisplayName": "choco vanila  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        },
                {
          "SubCatId": "2",
          "SubCategoryName": "Classic Cakes2",
          "item": [
            {
              "DisplayName": "xyz 500gms",
              "ItemData": {
                "ItemName": "xyz"
              }
            },
            {
              "DisplayName": "abc  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "abc vanila "
              }
            }
          ]
        }
      ]
    },
    {
      "categoryId": "2",
      "categoryName": "Markers",
      "subcat": [
        {
          "SubCatId": "2",
          "SubCategoryName": "Premium Cakes I",
          "item": [
            {
              "DisplayName": "choco caramel 500gms",
              "ItemData": {
                "Id": "65",
                "ItemName": "choco caramel"
              }
            },
            {
              "DisplayName": "choco  almond  500gms",
              "ItemData": {
                "Id": "52",
                "ItemName": "choco  almond "
              }
            }
  
          ]
        }
      ]
    }
 
  ]
}

I want to apply filter on 'categoryName' , 'SubCategoryName' , 'DisplayName' , 'ItemName'

for example if I search 'choco almond' (which is 'ItemName') then the resultant array should be like

{
  "data": [
    {
      "categoryId": "2",
      "categoryName": "Markers",
      "subcat": [
        {
          "SubCatId": "2",
          "SubCategoryName": "Premium Cakes I",
          "item": [
            {
              "DisplayName": "choco  almond  500gms",
              "ItemData": {
                "Id": "52",
                "ItemName": "choco  almond "
              }
            }
  
          ]
        }
      ]
    }
 
  ]
}

if i search 'Pens' (which is 'categoryName') then thw resultant array should be like

{
  "data": [
    {
      "categoryId": "1",
      "categoryName": "Pens",
      "subcat": [
        {
          "SubCatId": "1",
          "SubCategoryName": "Classic Cakes",
          "item": [
            {
              "DisplayName": "Excellent 500gms",
              "ItemData": {
                "ItemName": "Excellent"
              }
            },
            {
              "DisplayName": "choco vanila  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        },
                {
          "SubCatId": "2",
          "SubCategoryName": "Classic Cakes2",
          "item": [
            {
              "DisplayName": "xyz 500gms",
              "ItemData": {
                "ItemName": "xyz"
              }
            },
            {
              "DisplayName": "abc  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        }
      ]
    }
 
  ]
}

Answer 1

What you can do is do a filter inside a filter.

var filter = "Pens";
var result = d["data"].filter(c=>
c.categoryName==filter ||
c.subcat.filter(s => s.SubCategoryName == filter).length > 0 ||
c.subcat.filter(i => i.item.filter(it => it.ItemData.ItemName == filter).length > 0).length > 0
);
console.log(result)  

Where variable "d" is the json/object.