var data = [
{"id": 1, "area": 965, "bedrooms": 1, "floor": 3, "price": 2200},
{"id": 2,"area": 1065, "bedrooms": 2, "floor": 6, "price": 2726},
{"id": 3,"area": 401, "bedrooms": 2, "floor": 4, "price": 2726},
{"id": 4,"area": 699, "bedrooms": 3, "floor": 8, "price": 1232},
{"id": 5,"area": 661, "bedrooms": 1, "floor": 9, "price": 1277},
{"id": 6,"area": 412, "bedrooms": 1, "floor": 12, "price": 518},
{"id": 7,"area": 925, "bedrooms": 2, "floor": 10, "price": 2509},
];
// The filters I want to apply to my raw data
var filters = [
{highValue: 9, lowValue: 4, type: "floor"},
{highValue: 700, lowValue: 400, type: "area"},
];
var filteredData = data.filter(function(item){
for(var key in filters){
//Loop through the filters, get the type and values
var filterType = filters[key].type;
var filterHighValue = filters[key].highValue;
var filterLowValue = filters[key].lowValue;
//Get the object keys from the data.
//Get the particular key that matches the filterType
var itemKeys = Object.keys(item);
var itemKey = itemKeys.filter(function(matchedKey){
if(matchedKey == filterType){
return matchedKey;
}
});
//Eg., if ['floor'] == 'floor'
// Check if the floor value in our data object is between the two values in our filter.
if(filterType == itemKey){
if(item[itemKey] <= filterHighValue && item[itemKey] >= filterLowValue){
return item[itemKey];
}
}
}
});
console.log(filteredData);我有一個物件陣列，我試圖用另一個物件陣列動態過濾。我無法弄清楚按過濾器物件中的所有條件過濾資料的邏輯。
filtersData 當前正在回傳 ID 為 2、3、4、5 和 6 的物件。我希望它只回傳 3、4、5，因為這些行在我的過濾器陣列中滿足兩個條件。顯然，2、3、4、5 和 6 被回傳，因為我的邏輯只要求陣列中的一個條件為真，但我不知道該怎么做。
uj5u.com熱心網友回復：
您可以迭代過濾器并檢查所有約束是否為真。
const
data = [{ id: 1, area: 965, bedrooms: 1, floor: 3, price: 2200 }, { id: 2, area: 1065, bedrooms: 2, floor: 6, price: 2726 }, { id: 3, area: 401, bedrooms: 2, floor: 4, price: 2726 }, { id: 4, area: 699, bedrooms: 3, floor: 8, price: 1232 }, { id: 5, area: 661, bedrooms: 1, floor: 9, price: 1277 }, { id: 6, area: 412, bedrooms: 1, floor: 12, price: 518 }, { id: 7, area: 925, bedrooms: 2, floor: 10, price: 2509 }],
filters = [{ highValue: 9, lowValue: 4, type: "floor" }, { highValue: 700, lowValue: 400, type: "area" }],
result = data.filter(o => filters.every(({ highValue, lowValue, type }) =>
o[type] >= lowValue && o[type] <= highValue
));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
您可以使用該函式Array.prototype.every來檢查整個條件集是否為真。
const data = [{ id: 1, area: 965, bedrooms: 1, floor: 3, price: 2200 }, { id: 2, area: 1065, bedrooms: 2, floor: 6, price: 2726 }, { id: 3, area: 401, bedrooms: 2, floor: 4, price: 2726 }, { id: 4, area: 699, bedrooms: 3, floor: 8, price: 1232 }, { id: 5, area: 661, bedrooms: 1, floor: 9, price: 1277 }, { id: 6, area: 412, bedrooms: 1, floor: 12, price: 518 }, { id: 7, area: 925, bedrooms: 2, floor: 10, price: 2509 }];
const filters = [ {highValue: 9, lowValue: 4, type: "floor"}, {highValue: 700, lowValue:400, type: "area"},];
const result = data.filter(o => {
return filters.every(({highValue, lowValue, type}) => {
return o[type] <= highValue && o[type] >= lowValue;
});
});
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
您可以篩選條件成立filter的那些資料物件。every
const
data = [
{ id: 1, area: 965, bedrooms: 1, floor: 3, price: 2200 },
{ id: 2, area: 1065, bedrooms: 2, floor: 6, price: 2726 },
{ id: 3, area: 401, bedrooms: 2, floor: 4, price: 2726 },
{ id: 4, area: 699, bedrooms: 3, floor: 8, price: 1232 },
{ id: 5, area: 661, bedrooms: 1, floor: 9, price: 1277 },
{ id: 6, area: 412, bedrooms: 1, floor: 12, price: 518 },
{ id: 7, area: 925, bedrooms: 2, floor: 10, price: 2509 },
],
filters = [
{ highValue: 9, lowValue: 4, type: "floor" },
{ highValue: 700, lowValue: 400, type: "area" },
],
filteredData = data.filter((d) =>
filters.every((f) => d[f.type] >= f.lowValue && d[f.type] <= f.highValue)
);
console.log(filteredData);轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/496768.html
標籤：javascript 数组 目的 筛选
上一篇：復制到剪貼板HTML