我的模擬資料：
[
{
"id": 1,
"first_name": "Suzy",
"last_name": "Pinnell",
"email": "[email protected]",
"gender": "Agender",
"image": "http://dummyimage.com/410x239.png/5fa2dd/ffffff",
"department": "Marketing",
"job_title": "Quality Control Specialist",
"skill": "Residential Homes"
},
{
"id": 2,
"first_name": "Enriqueta",
"last_name": "Folbig",
"email": "[email protected]",
"gender": "Male",
"image": "http://dummyimage.com/247x244.png/5fa2dd/ffffff",
"department": "Sales",
"job_title": "Environmental Specialist",
"skill": "MMC"
},
{
"id": 3,
"first_name": "Simmonds",
"last_name": "Acomb",
"email": "[email protected]",
"gender": "Polygender",
"image": "http://dummyimage.com/315x256.png/dddddd/000000",
"department": "Human Resources",
"job_title": "Accountant",
"skill": "Xilinx"
},
{
"id": 4,
"first_name": "Bernita",
"last_name": "Hartman",
"email": "[email protected]",
"gender": "Female",
"image": "http://dummyimage.com/305x275.png/dddddd/000000",
"department": "Support",
"job_title": "Account ExecutiveII",
"skill": "Airframe"
}
]
我在這里發現了一個類似的問題： javascript filter array multiple conditions
要定義要過濾的內容，它們會傳遞一個物件：
var filter = {
gender: 'male',
department: 'Sales'
};
這有效。它顯示了包含兩個鍵的每個物件。
我試圖修改它，所以我可以使用一個陣列： *
var filter = {
gender: ['Male'],
department: ['Sales', 'Marketing']
};
我的目標是按陣列中的給定值過濾資料。只應顯示專案，其中包含銷售和營銷中的所有男性。
我試過包含（內部過濾器和 for in 回圈），但它只顯示第一個陣列的結果，第二個被忽略。我不確定如何在所有陣列中實作 AND 條件。
謝謝你。
uj5u.com熱心網友回復：
您可以提前存盤所有條目，以防止獲取每個資料物件以獲取過濾器的相同條目陣列。
過濾條目以洗掉可能的空陣列。
然后獲取條目并檢查值是否為資料之一或過濾器是否包含陣列，然后檢查過濾器陣列是否包含來自資料的值。
const
data = [{ id: 1, first_name: "Suzy", last_name: "Pinnell", email: "[email protected]", gender: "Agender", image: "http://dummyimage.com/410x239.png/5fa2dd/ffffff", department: "Marketing", job_title: "Quality Control Specialist", skill: "Residential Homes" }, { id: 2, first_name: "Enriqueta", last_name: "Folbig", email: "[email protected]", gender: "Male", image: "http://dummyimage.com/247x244.png/5fa2dd/ffffff", department: "Sales", job_title: "Environmental Specialist", skill: "MMC" }, { id: 3, first_name: "Simmonds", last_name: "Acomb", email: "[email protected]", gender: "Polygender", image: "http://dummyimage.com/315x256.png/dddddd/000000", department: "Human Resources", job_title: "Accountant", skill: "Xilinx" }, { id: 4, first_name: "Bernita", last_name: "Hartman", email: "[email protected]", gender: "Female", image: "http://dummyimage.com/305x275.png/dddddd/000000", department: "Support", job_title: "Account ExecutiveII", skill: "Airframe" }],
filter = { last_name: [], gender: ['Male'], department: ['Sales', 'Marketing'] },
filterEntries = Object
.entries(filter)
.filter(([, v]) => !Array.isArray(v) || v.length),
result = data.filter(o => filterEntries.every(([k, v]) =>
o[k] === v ||
Array.isArray(v) && v.includes(o[k])
));
console.log(result);uj5u.com熱心網友回復：
這是一個很好的每個用例:)
const data = [
{
"id": 1,
"first_name": "Suzy",
"last_name": "Pinnell",
"email": "[email protected]",
"gender": "Agender",
"image": "http://dummyimage.com/410x239.png/5fa2dd/ffffff",
"department": "Marketing",
"job_title": "Quality Control Specialist",
"skill": "Residential Homes"
},
{
"id": 2,
"first_name": "Enriqueta",
"last_name": "Folbig",
"email": "[email protected]",
"gender": "Male",
"image": "http://dummyimage.com/247x244.png/5fa2dd/ffffff",
"department": "Sales",
"job_title": "Environmental Specialist",
"skill": "MMC"
},
{
"id": 3,
"first_name": "Simmonds",
"last_name": "Acomb",
"email": "[email protected]",
"gender": "Polygender",
"image": "http://dummyimage.com/315x256.png/dddddd/000000",
"department": "Human Resources",
"job_title": "Accountant",
"skill": "Xilinx"
},
{
"id": 4,
"first_name": "Bernita",
"last_name": "Hartman",
"email": "[email protected]",
"gender": "Female",
"image": "http://dummyimage.com/305x275.png/dddddd/000000",
"department": "Support",
"job_title": "Account ExecutiveII",
"skill": "Airframe"
}
]
const filter = {
gender: ['Male'],
department: ['Sales', 'Marketing']
}
const result = data.filter(item => (
Object.entries(filter).every(([key, arr]) => arr.includes(item[key]))
))
console.log(result)uj5u.com熱心網友回復：
===您可以否定includes呼叫，而不是否定運算子：
data = data.filter(function(item) {
for (var key in filter) {
if (item[key] === undefined || !filter[key].includes(item[key]))
return false;
}
return true;
});
uj5u.com熱心網友回復：
您可以通過迭代過濾器物件來實作預期的結果，并在每次迭代時檢查目標物件是否可以通過您的過濾器（在下面我使用的代碼片段Object.entries和every方法中），如下所示：
const data = [
{
"id": 1,
"first_name": "Suzy",
"last_name": "Pinnell",
"email": "[email protected]",
"gender": "Agender",
"image": "http://dummyimage.com/410x239.png/5fa2dd/ffffff",
"department": "Marketing",
"job_title": "Quality Control Specialist",
"skill": "Residential Homes"
},
{
"id": 2,
"first_name": "Enriqueta",
"last_name": "Folbig",
"email": "[email protected]",
"gender": "Male",
"image": "http://dummyimage.com/247x244.png/5fa2dd/ffffff",
"department": "Sales",
"job_title": "Environmental Specialist",
"skill": "MMC"
},
{
"id": 3,
"first_name": "Simmonds",
"last_name": "Acomb",
"email": "[email protected]",
"gender": "Polygender",
"image": "http://dummyimage.com/315x256.png/dddddd/000000",
"department": "Human Resources",
"job_title": "Accountant",
"skill": "Xilinx"
},
{
"id": 4,
"first_name": "Bernita",
"last_name": "Hartman",
"email": "[email protected]",
"gender": "Female",
"image": "http://dummyimage.com/305x275.png/dddddd/000000",
"department": "Support",
"job_title": "Account ExecutiveII",
"skill": "Airframe"
}
];
const filter = {
gender: ['Male'],
department: ['Sales', 'Marketing']
}
const createFilterFun = filters => obj => Object.entries(filters).every( ([k, v]) => v.includes(obj[k]) );
const filterByGenderAndDepratment = createFilterFun(filter);
const result = data.filter(filterByGenderAndDepratment);
console.log(result)uj5u.com熱心網友回復：
試試這個
var itemsFilter = {
gender: ['Male'],
department: ['Sales', 'Marketing']
};
users= users.filter (function(item) {
var find=false;
for (var key in itemsFilter) {
find=false;
if (item[key] === undefined) return false;
for (var k in itemsFilter[key])
if (itemsFilter[key][k] == item[key]) find=true;
if (find==false) return false;
};
return find;
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/394292.html
標籤：javascript json 目的 过滤
上一篇：我有一個JSON包，我需要在我的應用程式中顯示其中的資料，我該怎么做？
下一篇：我無法將JSON更改為PHP陣列