如何过滤嵌套数组？

Question

如何过滤嵌套数组？ 我有一个包含用户的数组，我需要在其中显示所选用户的角色，但事实证明这是一个巨大的嵌套和一大堆迭代，如何避免这种情况并得到类似的东西：

const options = [
  { value: 1, label: "admin" },
  { value: 0, label: "moderator" }
];

我愿意

 const arr = [ { users: [ { id: 1, login: "alex", roles: [ { id: 0, name: "admin" }, { id: 1, name: "moderator" } ] }, { id: 2, login: "bob", roles: [{ id: 0, name: "viewer" }] } ] } ]; const rolesOptions = arr.filter(({ users }) => users.filter(({ id }) => id === 1).map(({ roles }) => roles.map(({ id, name }) => ({ label: name, value: id })) ) ); console.log(rolesOptions);

Answer 1

您可以将.flatMap()用于 map object 的外部arr 。对于每个内部嵌套的 object，您可以对其进行过滤以仅保留与1的id匹配的对象（正如您所做的那样）。 然后，您可以在过滤后的内部数组上使用.flatMap()到 map 每个角色到其重新键入的 object 和label和name 。 .flatMap()方法然后将返回的数组结果合并到一个结果数组中：

 const arr = [ { users: [ { id: 1, login: "alex", roles: [ { id: 0, name: "admin" }, { id: 1, name: "moderator" } ] }, { id: 2, login: "bob", roles: [{ id: 0, name: "viewer" }] } ] } ]; const options = arr.flatMap(({users}) => users.filter(({ id }) => id === 1).flatMap(({roles}) => roles.map(({ id, name }) => ({ label: name, value: id }))) ); console.log(options);

如果您确定每个对象的users数组中只能有一个用户 object 具有给定的id ，那么您可以通过使用.find()使代码更高效，以便它在具有 id 的 object 用户后立即返回发现：

 const arr = [{ users: [{ id: 1, login: "alex", roles: [{ id: 0, name: "admin" }, { id: 1, name: "moderator" }] }, { id: 2, login: "bob", roles: [{ id: 0, name: "viewer" }] }] }]; const options = arr.flatMap(({users}) => users.find(({ id }) => id === 1)?.roles.map(({ id, name }) => ({ label: name, value: id }))?? [] ); console.log(options);

上面使用可选链接( ?. ) 来检查是否可以找到具有该 ID 的用户，如果找不到该id ，则使用nullish 合并运算符( ?? ) 返回一个空数组。

Answer 2

您需要在外部数组arr上使用map而不是filter

flat然后压平剩余的对象

 const arr = [ { users: [ { id: 1, login: "alex", roles: [ { id: 0, name: "admin" }, { id: 1, name: "moderator" } ] }, { id: 2, login: "bob", roles: [{ id: 0, name: "viewer" }] } ] } ]; const rolesOptions = arr.map(({ users }) => users.filter(({ id }) => id === 1).map(({ roles }) => roles.map(({ id, name }) => ({ label: name, value: id })) ) ).flat(2); console.log(rolesOptions)

Answer 3

这就是我想出的：

const arr = [
  {
    users: [
      {
        id: 1,
        login: "alex",
        roles: [
          { id: 0, name: "admin" },
          { id: 1, name: "moderator" }
        ]
      },
      {
        id: 2,
        login: "bob",
        roles: [{ id: 0, name: "viewer" }]
      }
    ]
  }
];

const users = getUsers(arr)

const rolesOptions = getRolesOptions(users)

console.log(rolesOptions)

function getUsers(arr) {
  let res = [] // The result array

  arr
    .filter(({ users }) => users) // Filters to find every instance that has a "users" JSON key
    .map(({ users }) => users) // Maps out the users into multiple arrays
    .forEach(users => { // Adds each array of users into one array
      users.forEach(user => {
        res.push(user)
      })
    })

  return res
}

function getRolesOptions(users) {
  let res = []  // The result array

  users.forEach(user => {
    user.roles.forEach(({ name, id }) => { // For every user it pushes the role in formate { name, id } to the result array
      res.push({ label: name, value: id })
    })
  })

  return res
}

可能有一种更简洁的方法。 抱歉，如果不是您要求的