javascript - 如何正确过滤数组

标签 javascript reactjs filter

我正在尝试比较两个数组，但它没有正确过滤。我正在尝试添加用户，我的函数会比较 ID 和 StaffID，如果 StaffID 不在当前用户数组中，则应该设置新用户的状态，以便可以添加它们。 

export default function AddUserDropdown({onChange}) {
  useEffect(() => {
    getUsersToAdd();
  }, []);

  const [state, setState] = React.useState({
    open: false,
    name: '',
    users: [],
    id: null,
  });

  const [user, setUser] = React.useState({
    newUsers: []
  })

  const getUsersToAdd = () => {
    axios.all([
      axios.get('/updateUserList'),
      axios.get('/userInformation')
    ])
      .then(axios.spread((newUserBox, currentUserBox) => {
        let newUserIds = [];
        let currentUserIds = [];

        for (let newUser of currentUserBox.data){
          newUserIds.push(newUser.id);
        }

        for (let user of newUserBox.data) {
          if (!newUserIds[user.staffID]) {
            currentUserIds.push(user);
          }
        }

        setUser({...user, newUsers: currentUserIds });
      }));
    }

    // ...
  };

  // ...
};

当 axios 调用请求用户信息端点时，它会返回此 

[
  {
    "id": 1,
    "firstName": "Elton",
    "lastName": "Frederick",
    "departmentId": 1,
    "admin": true,
    "hasApproval": false,
    "position": "Developer",
    "vh5given": 31,
    "vh5rec": 280,
    "profilePic": "https://www.travelplannersinternational.com/wp-content/uploads/2019/12/Elton.jpg",
    "password": "abc234"
  },
  {
    "id": 2,
    "firstName": "Julio",
    "lastName": "Probando",
    "departmentId": 1,
    "admin": false,
    "hasApproval": true,
    "position": "Lead Dev",
    "vh5given": 11,
    "vh5rec": 339,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Julio_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc232"
  },
  {
    "id": 3,
    "firstName": "Corey",
    "lastName": "Chris",
    "departmentId": 2,
    "admin": false,
    "hasApproval": false,
    "position": "Customer Service",
    "vh5given": 14,
    "vh5rec": 167,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/09/Corey.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 4,
    "firstName": "Daisy",
    "lastName": "Ramos",
    "departmentId": 3,
    "admin": false,
    "hasApproval": false,
    "position": "ATC",
    "vh5given": 22,
    "vh5rec": 202,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Daisy_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc321"
  },
  {
    "id": 7,
    "firstName": "Air Car Hotel",
    "lastName": "Nunca",
    "departmentId": 4,
    "admin": false,
    "hasApproval": false,
    "position": "",
    "vh5given": 0,
    "vh5rec": 25,
    "profilePic": "profile.jpg",
    "password": "abc123"
  },
  {
    "id": 8,
    "firstName": "Jenn",
    "lastName": "Lee",
    "departmentId": 4,
    "admin": false,
    "hasApproval": false,
    "position": "Vp Of Sales",
    "vh5given": 0,
    "vh5rec": 0,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Jenn2_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 9,
    "firstName": "Reyna",
    "lastName": "Pagan",
    "departmentId": 5,
    "admin": false,
    "hasApproval": false,
    "position": "Agent Support Manager",
    "vh5given": 0,
    "vh5rec": 20,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Reyna_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 10,
    "firstName": "Ameilia",
    "lastName": "Rodriguez",
    "departmentId": 6,
    "admin": false,
    "hasApproval": false,
    "position": "Human Resources",
    "vh5given": 0,
    "vh5rec": 5,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Amelia_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  }
]

这些是已添加的用户。

当调用 updateUserList 端点时，它返回:

[
  {
    "staffID": 1,
    "dept": "Junior Web Developer",
    "email": "manasaN@tpionline.com",
    "name": "manasa",
    "password": "$2y$10$/zYS7OhzwdLOi6Slzc3Rv.aJFJALiY0y1J6MjnLCN24GmZ3rMHWUS"
  },
  {
    "staffID": 2,
    "dept": "Web Developer",
    "email": "juliof@tpionline.net",
    "name": "Julio Fajardo",
    "password": "$2y$10$MphAC8aRY2uzs1ZERZDn9uvCqK1/1nd7t0KukEkvGbx5Y4van.Da6"
  },
  {
    "staffID": 3,
    "dept": "Fake Title",
    "email": "johnf@tpionline.com",
    "name": "John Fester",
    "password": "$2y$10$/oa/ESQmhhc5WvxrQKoUU.Pj5sM3gZY5FccilGfCUL5eyeOU5IDSa"
  },
  {
    "staffID": 5,
    "dept": "Fake Title",
    "email": "fakeguy@gmail.net",
    "name": "Test",
    "password": "$2y$10$VWnnw5gRTN2absWos04fsOixW6TjOepNa3n0v/7ybFqsFZL8oPiJm"
  },
  {
    "staffID": 6,
    "dept": "Conf room",
    "email": "conf2@gmail.com",
    "name": "Conf 1st floor",
    "password": "$2y$10$KAZa1k2Sd/rg6dnVeqw4duB/XbAhcVXP.Fze6Zle3ZhcMaRphloG."
  },
  {
    "staffID": 8,
    "dept": "Fake Title",
    "email": "newguy@gmail.net",
    "name": "New guy",
    "password": ""
  },
  {
    "staffID": 9,
    "dept": "Fake Title",
    "email": "nguy@gmail.net",
    "name": "New Guy2",
    "password": ""
  },
  {
    "staffID": 12,
    "dept": "Test ADD",
    "email": "cristinab@tpionline.com",
    "name": "Cristina Bermudez",
    "password": "$2y$10$92I6fSJY6OW001caJJmeReHnaeF5tdHBjWHBmoCvX1RnfhTspjpBa"
  },
  {
    "staffID": 30,
    "dept": "Erwing",
    "email": "erwingh@tpionline.com",
    "name": "Erwing Hernandez",
    "password": "$2y$10$RWgOBbUHojgmyk3behYhd.kzdFEiH.6BBaxn4B070pS5q5Gf3ZYEa"
  }
]

我需要完成的是，如果当前没有用户的 ID 等于员工 ID，则应将其设置在状态中，以便我可以添加此用户。根据上面的数据，应该添加的用户应该是 员工ID为:5,6,12,30。

现在我的函数返回:

0: {staffID: 8, dept: "Fake Title", email: "newguy@gmail.net", name: "New guy", password: ""}
1: {staffID: 9, dept: "Fake Title", email: "nguy@gmail.net", name: "New Guy2", password: ""}
2: {staffID: 12, dept: "Test ADD", email: "cristinab@tpionline.com", name: "Cristina Bermudez", password: "$2y$10$92I6fSJY6OW001caJJmeReHnaeF5tdHBjWHBmoCvX1RnfhTspjpBa"}
3: {staffID: 30, dept: "Erwing", email: "erwingh@tpionline.com", name: "Erwing Hernandez", password: "$2y$10$RWgOBbUHojgmyk3behYhd.kzdFEiH.6BBaxn4B070pS5q5Gf3ZYEa"}

最佳答案 

let currentUserIds = currentUserBox.map(user => user.id)
let newUsers = newUserBox.filter(newUser => !currentUserIds.includes(newUser.staffID))

newUsers 是您想要的数组。

代码看起来像这样: 

let currentUserBox = [{
    "id": 1,
    "firstName": "Elton",
    "lastName": "Frederick",
    "departmentId": 1,
    "admin": true,
    "hasApproval": false,
    "position": "Developer",
    "vh5given": 31,
    "vh5rec": 280,
    "profilePic": "https://www.travelplannersinternational.com/wp-content/uploads/2019/12/Elton.jpg",
    "password": "abc234"
  },
  {
    "id": 2,
    "firstName": "Julio",
    "lastName": "Probando",
    "departmentId": 1,
    "admin": false,
    "hasApproval": true,
    "position": "Lead Dev",
    "vh5given": 11,
    "vh5rec": 339,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Julio_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc232"
  },
  {
    "id": 3,
    "firstName": "Corey",
    "lastName": "Chris",
    "departmentId": 2,
    "admin": false,
    "hasApproval": false,
    "position": "Customer Service",
    "vh5given": 14,
    "vh5rec": 167,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/09/Corey.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 4,
    "firstName": "Daisy",
    "lastName": "Ramos",
    "departmentId": 3,
    "admin": false,
    "hasApproval": false,
    "position": "ATC",
    "vh5given": 22,
    "vh5rec": 202,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Daisy_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc321"
  },
  {
    "id": 7,
    "firstName": "Air Car Hotel",
    "lastName": "Nunca",
    "departmentId": 4,
    "admin": false,
    "hasApproval": false,
    "position": "",
    "vh5given": 0,
    "vh5rec": 25,
    "profilePic": "profile.jpg",
    "password": "abc123"
  },
  {
    "id": 8,
    "firstName": "Jenn",
    "lastName": "Lee",
    "departmentId": 4,
    "admin": false,
    "hasApproval": false,
    "position": "Vp Of Sales",
    "vh5given": 0,
    "vh5rec": 0,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Jenn2_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 9,
    "firstName": "Reyna",
    "lastName": "Pagan",
    "departmentId": 5,
    "admin": false,
    "hasApproval": false,
    "position": "Agent Support Manager",
    "vh5given": 0,
    "vh5rec": 20,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Reyna_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"
  },
  {
    "id": 10,
    "firstName": "Ameilia",
    "lastName": "Rodriguez",
    "departmentId": 6,
    "admin": false,
    "hasApproval": false,
    "position": "Human Resources",
    "vh5given": 0,
    "vh5rec": 5,
    "profilePic": "https://388616.smushcdn.com/941012/wp-content/uploads/2019/03/Amelia_.jpg?lossy=1&strip=1&webp=1",
    "password": "abc123"


  }
]

let newUserBox = [{
    "staffID": 1,
    "dept": "Junior Web Developer",
    "email": "manasaN@tpionline.com",
    "name": "manasa",
    "password": "$2y$10$/zYS7OhzwdLOi6Slzc3Rv.aJFJALiY0y1J6MjnLCN24GmZ3rMHWUS"
  },
  {
    "staffID": 2,
    "dept": "Web Developer",
    "email": "juliof@tpionline.net",
    "name": "Julio Fajardo",
    "password": "$2y$10$MphAC8aRY2uzs1ZERZDn9uvCqK1/1nd7t0KukEkvGbx5Y4van.Da6"
  },
  {
    "staffID": 3,
    "dept": "Fake Title",
    "email": "johnf@tpionline.com",
    "name": "John Fester",
    "password": "$2y$10$/oa/ESQmhhc5WvxrQKoUU.Pj5sM3gZY5FccilGfCUL5eyeOU5IDSa"
  },
  {
    "staffID": 5,
    "dept": "Fake Title",
    "email": "fakeguy@gmail.net",
    "name": "Test",
    "password": "$2y$10$VWnnw5gRTN2absWos04fsOixW6TjOepNa3n0v/7ybFqsFZL8oPiJm"
  },
  {
    "staffID": 6,
    "dept": "Conf room",
    "email": "conf2@gmail.com",
    "name": "Conf 1st floor",
    "password": "$2y$10$KAZa1k2Sd/rg6dnVeqw4duB/XbAhcVXP.Fze6Zle3ZhcMaRphloG."
  },
  {
    "staffID": 8,
    "dept": "Fake Title",
    "email": "newguy@gmail.net",
    "name": "New guy",
    "password": ""
  },
  {
    "staffID": 9,
    "dept": "Fake Title",
    "email": "nguy@gmail.net",
    "name": "New Guy2",
    "password": ""
  },
  {
    "staffID": 12,
    "dept": "Test ADD",
    "email": "cristinab@tpionline.com",
    "name": "Cristina Bermudez",
    "password": "$2y$10$92I6fSJY6OW001caJJmeReHnaeF5tdHBjWHBmoCvX1RnfhTspjpBa"
  },
  {
    "staffID": 30,
    "dept": "Erwing",
    "email": "erwingh@tpionline.com",
    "name": "Erwing Hernandez",
    "password": "$2y$10$RWgOBbUHojgmyk3behYhd.kzdFEiH.6BBaxn4B070pS5q5Gf3ZYEa"
  }
]


let currentUserIds = currentUserBox.map(user => user.id)
let newUsers = newUserBox.filter(newUser => !currentUserIds.includes(newUser.staffID))

console.log(newUsers)

关于javascript - 如何正确过滤数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59360708/

上一篇：javascript - 从 HTML 创建对象数组不起作用

下一篇：javascript - 学习者问题 : How to conditionally set wrapper for this particular code. React/SPFX

相关文章：

reactjs - React Native FlatList 项目不呈现

javascript - 如何使用 Redux 过滤数据但保持旧状态？

javascript - 如何在pouchDB/couchDB中查询多个条件

Javascript - 在新窗口中的 toUpperCase

reactjs - MUI 在 <Input> 组件的焦点上更改条形颜色

Django 对象过滤器(最后 1000 个)

ios - 两次后 GPUImageView 停止响应 "Filter Change"

javascript - 向这个 Express.js 模型类添加一个数组属性

JavaScript/jQuery : How to properly use setTimeout before redirect

filter - SilverStripe 3.1.x - DataList唯一字段值过滤器/如何使用ORM对分组列表中的项目进行计数？

©2024 IT工具网  联系我们