How to use array filter for both parent and child values in angular 11

Question

I have array object i need to use some condition for fetch the data.

this.knowledgeData = [
    {
        "id": 3,
        "name": "Education",
        "isOtherCategory": 0,
        "isKnowledgeSkills": false,
        "isMyInterest": false,
        "isParentKnowledgeSkills": true,
        "isParentMyInterest": false,
        "subCategories": [
            {
                "id": 96,
                "categoryId": 3,
                "name": "Careers",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": false,
                "isMyInterest": false
            },
            {
                "id": 97,
                "categoryId": 3,
                "name": "General",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
            {
                "id": 92,
                "categoryId": 3,
                "name": "Home Schooling",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
        ]
    }
]

Have used filter option to find the datas with satisfied conditions..

this.knowledgeData = this.knowledgeData.filter((x)=>{
          if(x.isParentKnowledgeSkills ===true && x?.subCategories?.isKnowledgeSkills ===true){
            return true
          }
        })

Its return empty... I need to find the data only the parent and child value return true

result should be like following

this.knowledgeData = [
    {
        "id": 3,
        "name": "Education",
        "isOtherCategory": 0,
        "isKnowledgeSkills": false,
        "isMyInterest": false,
        "isParentKnowledgeSkills": true,
        "isParentMyInterest": false,
        "subCategories": [
            {
                "id": 97,
                "categoryId": 3,
                "name": "General",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
            {
                "id": 92,
                "categoryId": 3,
                "name": "Home Schooling",
                "isOtherSubCategory": 0,
                "isKnowledgeSkills": true,
                "isMyInterest": false
            },
        ]
    }
]

which means output should return the object which is having isKnowledgeSkills is true in child array subCategories

Answer 1

I would go with the following:

const filtered = knowledgeData.filter(p => p.isParentKnowledgeSkills)
    .map(p => ({
        ...p,
        subCategories: p.subCategories.filter(s => s.isKnowledgeSkills)
    }));

• first filter out parent data with isParentKnowledgeSkills
• secondly, filter out child data

Playground link

Answer 2

I have found the answer...

this.knowledgeData = this.knowledgeData.map((i)=>{
          i.subCategories = i.subCategories.filter((x)=> x.isKnowledgeSkills === true)
          return i;
        })

Answer 3

change your if condition

if(x.isParentKnowledgeSkills === true 
      && ( x.subCategories.filter((y) => y.isKnowledgeSkills ===true).length )){
            return true
          }