How To Filtering Array Of Sub-array Of Objects And Array Of Sub-array Of Objects In Javascript

I have got two arrays of objects. I want to filter data based on permissionObj. This is coming from database. Here are arrays of sub-arrays in the permissionObj. let permissionObj

Solution 1:

You can gain of reduce method as it allows to write complex logic and decide what should be done on each iteration of an array. I slightly edited your source data as it is hard to understand the logic of filtering.

At first, we create an object which will contain filter data. Why object? As object has O(1) to access to their keys.

const filterObject = permissionObj.reduce((a, c) => {
    for (const key in c) {
        a[key] = c[key];
    }
    return a;
},{});

Then we use reduce method to decide whether the array element is eligible to be pushed:

const result = PubSidebar.reduce((a, c)=> {
    if (filterObject[c.label] && c.value
        && filterObject[c.label].some(s => s.value == c.value) ) {
        a.push(c);
    }
    else if (c.content.some(s => filterObject[s.key]) && c.content) {
        c.content = c.content.filter(f => filterObject[f.key]
            && filterObject[f.key].some(s => s.value == f.value));
        a.push(c);
    }
    return a;
}, [])

An example:

let permissionObj = [
    {
        "OA deal": [{
            label: "can view",
            value: "can_view"
        }
        ]
    }, {
        "Deposit": [{
            label: "can edit",
            value: "can_edit"
        },
        ]
    },
    {
        "Deposit": [{
            label: "can_view",
            value: "can_view"
        },
        ]
    },
    {
        "Journals": [{
            label: "can create",
            value: "can_create"
        }]
    },
    {
        "Dashboard": [{
            label: "can view",
            value: "can_view"
        }]
    }
];

const PubSidebar = [
    {
        label: "Dashboard",
        value: "can_view"
    },
    {
        label: "OA deal",
        content: [
            {
                label: "view oadeal",
                key: "OA deal",
                value: "can_view"
            },

            {
                label: "Deposit",
                key: "Deposit",
                value: "can_view"
            },
            {
                label: "Corrections",
                key: "Corrections",
                value: "can_edit"
            },

        ]
    },
    {
        label: "Journal",
        content: [{
            label: "Add Journal",
            key: "Journals",
            value: "can_create"
        },

        ]
    },
];

const filterObject = permissionObj.reduce((a, c) => {
    for (const key in c) {
        a[key] = c[key];
    }
    return a;
},{});


const result = PubSidebar.reduce((a, c)=> {
    if (filterObject[c.label] && c.value
        && filterObject[c.label].some(s => s.value == c.value) ) {
        a.push(c);
    }
    else if (c.content.some(s => filterObject[s.key]) && c.content) {
        c.content = c.content.filter(f => filterObject[f.key]
            && filterObject[f.key].some(s => s.value == f.value));
        a.push(c);
    }
    return a;
}, [])
console.log(result);