按多个条件过滤数组

Question

我有一个要按 3 个条件过滤的对象列表：名称、角色、分支

list = [{​​​​
    "userName": "name1",
    "roleArray": [
        "role1",
        "role2"
    ],
    "branchArray": [
        "branch1",
        "branch2",
        "branch3"
    ]
}​​​​,
{​​​​
    "userName": "name2",
    "roleArray": [
        "role2",
        "role3"
    ],
    "branchArray": [
        "branch3",
        "branch4",
        "branch5"
    ]
}​​​​,
{​​​​
    "userName": "name3",
    "roleArray": [
        "role1",
        "role3"
    ],
    "branchArray": [
        "branch1",
        "branch2",
        "branch4"
    ]
}];
filter_name = "" ; //can be empty
filter_role = ["role1","role3"]; // can be empty
filter_branch = ["branch1","branch5"] //can be empty

如何使用上述 3 个条件进行过滤 在所有条件为空的情况下，返回原始列表

谢谢你，祝你有美好的一天

Answer 1

你的list 变量需要是一个数组，所以我已经进行了相应的转换。

您可以尝试将其放入一个衬里，但我已将其分开以获得更好的模块化和可读性：

list =[ {
    "userName": "name1",
    "roleArray": [
        "role1",
        "role2"
    ],
    "branchArray": [
        "branch1",
        "branch2",
        "branch3"
    ]
},
{
    "userName": "name2",
    "roleArray": [
        "role2",
        "role3"
    ],
    "branchArray": [
        "branch3",
        "branch4",
        "branch5"
    ]
},
{
    "userName": "name3",
    "roleArray": [
        "role1",
        "role3"
    ],
    "branchArray": [
        "branch1",
        "branch2",
        "branch4"
    ]
}];
filter_name = "name3" ; //can be empty
filter_role = ["role1","role3"]; // can be empty
filter_branch = ["branch1","branch5"] //can be empty

const result = list.filter( u => !u.userName || u.userName === filter_name)
                   .filter( u => !u.roleArray.length || u.roleArray.some( v => filter_role.includes(v)))
                   .filter( u => !u.branchArray.length || u.branchArray.some( v => filter_branch.includes(v)))
                   
console.log (result)

Answer 2

首先，我将你的列表对象的类型调整为数组，然后我使用filter技术过滤你的三个条件，并快速轻松地编写了一个查询UI，你可以点击下面的运行代码sn-p按钮查看查询结果

const list = [{
    "userName": "name1",
    "roleArray": ["role1", "role2"],
    "branchArray": ["branch1", "branch2", "branch3"]
}, {
    "userName": "name2",
    "roleArray": ["role2", "role3"],
    "branchArray": ["branch3", "branch4", "branch5"]
}, {
    "userName": "name3",
    "roleArray": ["role1", "role3"],
    "branchArray": ["branch1", "branch2", "branch4"]
}];

$('input[type=button]').on('click', function() {
  const data = Object.fromEntries(new FormData($('form')[0]).entries());
  const result = list.filter(e => {
      const condition1 = data.name == '' ? true : e.userName == data.name;
      const condition2 = data.role == '' ? true : e.roleArray.includes(data.role);
      const condition3 = data.branch == '' ? true : e.branchArray.includes(data.branch);
      return condition1 && condition2 && condition3;
  });
  $('.output').html(result.length == 0 ? $('<p>Empty</p>') : JSON.stringify(result, undefined, 2));
});

.wrap{
  display: flex;
}

.output{
  margin-left:50px;
  border-width:3px;
  border-style:dashed;
  border-color:#FFAC55;
  padding:5px;
  min-width: 150px;
  min-height: 130px;
}
.output p{
  line-height: 100px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div>
    <form>
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="role">Role:</label><br>
      <input type="text" id="role" name="role"> <br>
      <label for="branch">Branch:</label><br>
      <input type="text" id="branch" name="branch"><br><br>
      <input type="button" value="Search">
    </form>
  </div>
  <div>
    <pre class="output">
    </pre>
  </div>
</div>