如何過濾嵌套數組？

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
}

可能有一種更簡潔的方法。 抱歉，如果不是您要求的