how to filtering array of sub-array of objects and array of sub-array of objects in javascript

Question

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 = [
        {
            "Deposit": [{
                    label: "can create",
                    value: "can_create"
                }, 
            ]
        },
        {
            "Journals": [{
                label: "can create",
                value: "can_create"
            }]
        },

        {
            "Dashboard": [{
                label: "can view",
                value: "can_view"
            }]
        },
    ]

this is static data. I want to compare this data based on permission.

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

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

            ]
        },
    ];

Here is my PubSidebar , I need three types of filtering - if pubSidebar array of Objects then it will be filtering based on label.For examaple, Dashboard - if pubSidebar array of sub-array of objects, then filtering will be based label, key and value , For example, PermissionObj key: will be property name such as OA deal, Deposit, value : can_view or anything

My expected output would be :

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

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

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

            ]
        },
    ];

StepUp · Accepted Answer · 2020-03-30 19:56:37Z

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

answered Mar 30, 2020 at 19:56

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

sujon Over a year ago

If I want to remove child array property - { label: "view oadeal", key: "OA deal", value: "can_view" }, will the whole array remove?

sujon Over a year ago

Just edited again . For example , If I see OA deal , deposit empty array inside permissionobj, then OA deal remove from pubsidebar . However, if Deposit or OA deal is exists , it will be remain inside pubsidebar How can it will be done ?

StepUp Over a year ago

@sujon it is better to do on your own as such requirements will be always and you will have to create new post at stackoverflow. So just try to write code on your own. It is really interesting. When people see your attempts, and some understandable explanation, then you will get a feedback. You are already great! I believe you can do it!:)

sujon Over a year ago

it's inspiration from you . thanks I am trying to do

StepUp Over a year ago

@sujon hi! I am sorry, however, I am a little bit busy at work! I will see later

|

Collectives™ on Stack Overflow

how to filtering array of sub-array of objects and array of sub-array of objects in javascript

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related