How to access nested array of objects element using filter in Angular?

Issue

I have been trying to filter the nested array of objects and display the details when the min_age_limit===18.

Here is the json :

    "centers": [
    {
            "center_id": 603425,
            "name": "Childrens Hospital",
            "fee_type": "Paid",
            "sessions": [{
                "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b",
                "date": "22-05-2021",
                "available_capacity": 0,
                "min_age_limit": 18,
            }, {
                "session_id": "54347880-3090-4962-aa56-451fbaca16e1",
                "date": "22-05-2021",
                "available_capacity": 25,
                "min_age_limit": 45,
            }]
    },
    {
            "center_id": 195100,
            "name": "playschool thousandlights",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254600,
            "name": "calcicut Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 18,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 264987,
            "name": "sholings GH",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 45,
                
            },
{
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "24-05-2021",
                "available_capacity": 25,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254566,
            "name": "greenland Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 45,
                
            }]
    }
    ]
            

So to make it clear, I need to display the session details which has the min_age_limit===18 along with his center details..

I tried this code:

 this.availabityDetails=this.centers.filter(item=>item.sessions.some(age=>age.min_age_limit===18)); 
       console.log(this.availabityDetails);

But I am getting the session details of all the center element which has satisfied atleast one condition. Like,if there is a min_age_limit=18 in the element with center_id=195100,I need to display only that session element details along with the corresponding center details which has satifies this. I need to display only this: availableDetails should contain this after filtering.

[
    {
            "center_id": 603425,
            "name": "Childrens Hospital",
            "fee_type": "Paid",
            "sessions": [{
                "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b",
                "date": "22-05-2021",
                "available_capacity": 0,
                "min_age_limit": 18,
            }]
    },
    {
            "center_id": 195100,
            "name": "playschool thousandlights",
            "fee_type": "Free",
            "sessions": [ {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254600,
            "name": "calcicut Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 18,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 264987,
            "name": "sholings GH",
            "fee_type": "Free",
            "sessions": [
{
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "24-05-2021",
                "available_capacity": 25,
                "min_age_limit": 18,
                
            }]
    }
    ]

I need to have the above information in the availableDetails(i.e availableDetails are of type center[]).In above o/p code,centers details are displayed with only the sessions which satisy the condition.i.e session which has min_age_limit =45 are left out . Also In the center ,if there is no session with min_age_limit=18,I dont want that center details in the o/p. Hope it gives a Clear picture of what I want. Help me with this code..

Solution

const input = {"centers":[{"center_id":603425,"name":"Childrens Hospital","fee_type":"Paid","sessions":[{"session_id":"4e687873-5ecc-4086-893e-31a1b450ca3b","date":"22-05-2021","available_capacity":0,"min_age_limit":18,},{"session_id":"54347880-3090-4962-aa56-451fbaca16e1","date":"22-05-2021","available_capacity":25,"min_age_limit":45,}]},{"center_id":195100,"name":"playschool thousandlights","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":18,}]},{"center_id":254600,"name":"calcicut Hospital","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":18,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":18,}]},{"center_id":264987,"name":"sholings GH","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"24-05-2021","available_capacity":25,"min_age_limit":18,}]},{"center_id":254566,"name":"greenland Hospital","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":45,}]}]}
const res = input.centers
  .map(({sessions, ...r}) => ({
    ...r,
    sessions: sessions.filter(e => e.min_age_limit === 18)
  }))
  .filter(e => e.sessions.length)
console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answered By - ulou