How to filter through children of array of objects and then return parent with updated children?

Question

I'm trying to filter through an array of objects it's children then update the children and return the parent with updated children.

Example array of objects:

[
    {
        "id": 1,
        "name": "group1",
        "users": [
            {
                "id": 1,
                "name": "Mike"
            },
            {
                "id": 2,
                "name": "Steve"
            },
            {
                "id": 3,
                "name": "John"
            }
        ]
    },
    {
        "id": 2,
        "name": "group2",
        "users": [
            {
                "id": 4,
                "name": "Phill"
            },
            {
                "id": 5,
                "name": "Joe"
            },
            {
                "id": 6,
                "name": "Dominik"
            }
        ]
    }
]

I've got an input in React where someone can type in a name of an user, then i'd like to only show the users with that name while keeping the group that they're in.

For example, if the input is 'Mike' I would like the result to be:

[
    {
        "id": 1,
        "name": "group1",
        "users": [
            {
                "id": 1,
                "name": "Mike"
            }
        ]
    },
    {
        "id": 2,
        "name": "group2",
        "users": []
    }
]

Answer 1

You can use map() and filter() to do that.

 let arr = [ { "id": 1, "name": "group1", "users": [ { "id": 1, "name": "Mike" }, { "id": 2, "name": "Steve" }, { "id": 3, "name": "John" } ] }, { "id": 2, "name": "group2", "users": [ { "id": 4, "name": "Phill" }, { "id": 5, "name": "Joe" }, { "id": 6, "name": "Dominik" } ] } ]; function filterUsers(arr, name) { return arr.map(obj => { return {...obj, "users": obj.users.filter(user => user.name === name) }; }); } console.log(filterUsers(arr, "Mike"));