मेरे पास ऑब्जेक्ट की एक सूची है जिसे मैं 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 शर्त के साथ कैसे फ़िल्टर करें सभी शर्त खाली होने की स्थिति में, मूल सूची लौटाएं

शुक्रिया और आप का दिन शुभ रहे

0
Tuan Do Huu 19 अगस्त 2021, 05:21

2 जवाब

सबसे बढ़िया उत्तर

आपका 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)
0
Carsten Massmann 19 अगस्त 2021, 05:31

सबसे पहले, मैंने आपकी सूची वस्तु के प्रकार को सरणी में समायोजित किया, फिर मैंने फ़िल्टर तकनीक, और जल्दी और आसानी से एक क्वेरी UI लिखा, आप क्वेरी परिणाम देखने के लिए नीचे दिए गए रन कोड स्निपेट बटन पर क्लिक कर सकते हैं

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>
0
Ian 19 अगस्त 2021, 04:35