javascript - 如何过滤对象数组的子对象，然后返回具有更新子对象的父对象？

Question

我正在尝试过滤它的子对象数组，然后更新子对象并返回具有更新子对象的父对象。

对象数组示例：

[
    {
        "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"
            }
        ]
    }
]

我在 React 中有一个输入，有人可以输入用户名，然后我想只显示具有该名称的用户，同时保留他们所在的组。

例如，如果输入是“迈克”，我希望结果是：

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

标签： javascriptreactjsfilter

Answer 1

您可以使用map()和filter()来做到这一点。

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