如何过滤对象数组基于属性?

小开

你可以很容易地做到这一点-可能有很多实现可供你选择，但这是我的基本想法(可能有一些格式，你可以用jQuery迭代一个对象，我只是现在想不起来):

function filter(collection, predicate)
{
var result = new Array();
var length = collection.length;


for(var j = 0; j < length; j++)
{
if(predicate(collection[j]) == true)
{
result.push(collection[j]);
}
}


return result;
}

然后你可以像这样调用这个函数:

filter(json, function(element)
{
if(element.price <= 1000 && element.sqft >= 500 && element.num_of_beds > 2 && element.num_of_baths > 2.5)
return true;


return false;
});

这样，您可以根据定义的任何谓词调用筛选器，甚至可以使用更小的筛选器进行多次筛选。

小开

最佳答案

你可以使用Array.prototype.filter方法:

var newArray = homes.filter(function (el) {
return el.price <= 1000 &&
el.sqft >= 500 &&
el.num_of_beds >=2 &&
el.num_of_baths >= 2.5;
});

生活例子:

var obj = {
'homes': [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
},
// ... (more homes) ...
]
};
// (Note that because `price` and such are given as strings in your object,
// the below relies on the fact that <= and >= with a string and number
// will coerce the string to a number before comparing.)
var newArray = obj.homes.filter(function (el) {
return el.price <= 1000 &&
el.sqft >= 500 &&
el.num_of_beds >= 2 &&
el.num_of_baths >= 1.5; // Changed this so a home would match
});
console.log(newArray);

该方法是新ECMAScript第五版标准的一部分，几乎可以在所有现代浏览器中找到。

对于IE，为了兼容性，你可以包含以下方法:

if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();


var res = [];
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this) {
var val = this[i];
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}

小开

你可以尝试使用像jLinq这样的框架——下面是一个使用jLinq的代码示例

var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();

欲了解更多信息，请访问http://www.hugoware.net/projects/jlinq链接

小开

我更喜欢下划线框架。它提出了许多有用的对象操作。你的任务:< / p >

var newArray = homes.filter(
price <= 1000 &
sqft >= 500 &
num_of_beds >=2 &
num_of_baths >= 2.5);

可以像这样覆盖:

var newArray = _.filter (homes, function(home) {
return home.price<=1000 && sqft>=500 && num_of_beds>=2 && num_of_baths>=2.5;
});

希望对大家有用!

小开

这里是工作提琴，在IE8使用jquery MAP函数工作良好

http://jsfiddle.net/533135/Cj4j7/

json.HOMES = $.map(json.HOMES, function(val, key) {
if (Number(val.price) <= 1000
&& Number(val.sqft) >= 500
&& Number(val.num_of_beds) >=2
&& Number(val.num_of_baths ) >= 2.5)
return val;
});

小开

你可以自己实现一个过滤方法来满足你的需求，下面是如何实现的:

function myfilter(array, test){
var passedTest =[];
for (var i = 0; i < array.length; i++) {
if(test( array[i]))
passedTest.push(array[i]);
}


return passedTest;
}


var passedHomes = myfilter(homes,function(currentHome){
return ((currentHome.price <= 1000 )&& (currentHome.sqft >= 500 )&&(currentHome.num_of_beds >=2 )&&(currentHome.num_of_baths >= 2.5));
});

希望有帮助!

小开

你可以使用jQuery.grep()自jQuery 1.0:

$.grep(homes, function (h) {
return h.price <= 1000
&& h.sqft >= 500
&& h.num_of_beds >= 2
&& h.num_of_baths >= 2.5
});

小开

或者你可以简单地使用$.each(它也适用于对象，而不仅仅是数组)并像这样构建一个新数组:

var json = {
'homes': [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
},
// ... (more homes) ...
{
"home_id": "3-will-be-matched",
"price": "925",
"sqft": "1000",
"num_of_beds": "2",
"num_of_baths": "2.5",
},
]
}


var homes = [];
$.each(json.homes, function(){
if (this.price <= 1000
&& this.sqft >= 500
&& this.num_of_beds >= 2
&& this.num_of_baths >= 2.5
) {
homes.push(this);
}
});

小开

你应该看看OGX。列表，它内置了过滤方法，并扩展了标准javascript数组(以及分组、排序和查找)。下面是它为过滤器支持的操作符列表:

'eq' //Equal to
'eqjson' //For deep objects, JSON comparison, equal to
'neq' //Not equal to
'in' //Contains
'nin' //Doesn't contain
'lt' //Lesser than
'lte' //Lesser or equal to
'gt' //Greater than
'gte' //Greater or equal to
'btw' //Between, expects value to be array [_from_, _to_]
'substr' //Substring mode, equal to, expects value to be array [_from_, _to_, _niddle_]
'regex' //Regex match

你可以这样使用它

  let list = new OGX.List(your_array);
list.addFilter('price', 'btw', 100, 500);
list.addFilter('sqft', 'gte', 500);
let filtered_list = list.filter();

或者这样

  let list = new OGX.List(your_array);
let filtered_list = list.get({price:{btw:[100,500]}, sqft:{gte:500}});

或者作为一行

   let filtered_list = new OGX.List(your_array).get({price:{btw:[100,500]}, sqft:{gte:500}});

小开

var filterHome = homes.filter(home =>
return (home.price <= 999 &&
home.num_of_baths >= 2.5 &&
home.num_of_beds >=2 &&
home.sqft >= 998));
console.log(filterHome);

你可以用这个函数。更多的细节可以在这里找到，因为我们过滤的数据基于你有条件返回真或假，它将收集数据在不同的数组，所以你的实际数组将不会被修改。

@JGreig请调查一下。

小开

我很惊讶居然没有人发这样的回复:

const filteredHomes = json.homes.filter(x => x.price <= 1000 && x.sqft >= 500 && x.num_of_beds >=2 && x.num_of_baths >= 2.5);

.．.为了便于阅读:

const filteredHomes = json.homes.filter( x =>
x.price <= 1000 &&
x.sqft >= 500 &&
x.num_of_beds >=2 &&
x.num_of_baths >= 2.5
);

小开

const y = 'search text';
const a = [{key: "x", "val: "y"},  {key: "d", "val: "z"}]
const data = a.filter(res => {
return(JSON.stringify(res).toLocaleLowerCase()).match(y.toLocaleLowerCase());
});

小开

我知道在你的例子中，你想使用条件而不是值，但我的答案对问题标题有效，所以我想把我的方法留在这里。

function ruleOut(arr, filterObj, applyAllFilters=true) {
return arr.filter( row => {
for (var field in filterObj) {
var val = row[field];
if (val) {
if (applyAllFilters && filterObj[field].indexOf(val) > -1) return false;
else if (!applyAllFilters) {
return filterObj[field].filter(function(filterValue){
return (val.indexOf(filterValue)>-1);
}).length == 0;
}
}
}
return true;
});
}

假设你有一个演员名单，是这样的:

let actors = [
{userName:"Mary", job:"star", language:"Turkish"},
{userName:"John", job:"actor", language:"Turkish"},
{userName:"Takis", job:"star", language:"Greek"},
{userName:"Joe", job:"star", language:"Turkish"},
{userName:"Bill", job:"star", language:"Turkish"}
];

你想找到所有被评为好莱坞明星的演员，他们的国籍不应该是“英国”、“意大利”、“西班牙”、“希腊”之一，加上他们的名字也不应该是“玛丽”、“乔”之一。奇怪的例子，我知道!不管怎样，有了这些条件，你可以创建以下对象:

let unwantedFieldsFilter= {
userName: ['Mary', 'Joe'],
job: ['actor'],
language: ['English', 'Italian', 'Spanish', 'Greek']
};

好，现在如果你ruleOut(actors, unwantedFieldsFilter)，你只会得到

[{用户名:“比尔”，职位:“明星”，语言:“土耳其语”}]

比尔是你的男人，因为他的名字不是“玛丽”，“乔”之一，他的国籍不包括在['英国'，'意大利'，'西班牙'，'希腊']，加上他是一个明星!

在我的方法中有一个选项，即applyAllFilters，默认为true。如果你试图将这个参数设置为false，这将作为“或”过滤而不是“与”过滤。示例:ruleOut(actors, {job:["actor"], language:["Italian"]}, false)将得到所有不是演员或意大利人的人:

< p >[{用户名:“玛丽”,工作:“明星”,语言:“土耳其”},< br > {用户名:“Takis”，职位:“star”，语言:“Greek”}，
{用户名:“Joe”，工作:“star”，语言:“土耳其语”}，
{用户名:"Bill"，职位:"star"，语言:"土耳其语"}]
. \{\{/p> .}

小开

const state.contactList = [{
name: 'jane',
email: 'jane@gmail.com'
},{},{},...]


const fileredArray = state.contactsList.filter((contactItem) => {
const regex = new RegExp(`${action.payload}`, 'gi');
return contactItem.nameProperty.match(regex) ||
contactItem.emailProperty.match(regex);
});




// contactList: all the contacts stored in state
// action.payload: whatever typed in search field

小开

用于搜索数组中对象的所有属性的高级代码

b=[];
yourArray.forEach(x => {
Object.keys(x).forEach(i => {if (x[i].match('5') && !b.filter(y => y === x).length) { b.push(x) }})
});
console.log(b)

小开

使用过滤器

var json = {
homes: [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
},
         

]
}




let filter =
json.homes.filter(d =>
  

d.price >= 1000 &
d.sqft >= 500 &
d.num_of_beds >=2 &
d.num_of_baths >= 2.5
)


console.log(filter)

小开

你可以使用forEach

const filterOutputs = [];
json.homes.forEach((home) => {
if (
parseInt(home.price) <= 1000 &&
parseInt(home.sqft) >= 500 &&
parseInt(home.num_of_beds) >= 2 &&
parseInt(home.num_of_baths) >= 2
) {
filterOutputs.push(home);
}
});


console.log(filterOutputs);

小开

我看到有一种情况没有被覆盖，也许有人会像我一样寻找匹配的情况。当有人想通过属性值(字符串或数字)进行过滤时，使用"where match "有条件的，比如按城市名称等等。换句话说，就像Query:返回数组的所有家庭WHERE city = "Chicago"解决方法很简单:

  const filterByPropertyValue = (cityName) => {
let filteredItems = homes.filter((item) => item.city === cityName);
console.log("FILTERED HOMES BY CITY:", filteredItems);
}

如果你需要通过编程或在HTML中循环/映射数组或通过提供'city'值来触发它(你也可以提供数组，只需要在函数中添加它来重用函数):

            <button
onClick={() => {
filterByPropertyValue("Chicago");
}}
>
Chicago Homes Only
</button>

假设JSON添加了城市属性:

'homes': [{
"home_id": "1",
"price": "925",
"sqft": "1100",
"num_of_beds": "2",
"num_of_baths": "2.0",
"city":"Chicago",
}, {
"home_id": "2",
"price": "1425",
"sqft": "1900",
"num_of_beds": "4",
"num_of_baths": "2.5",
"city":"Chicago",
},
// ... (more homes) ...
{
"home_id": "3-will-be-matched",
"price": "925",
"sqft": "1000",
"num_of_beds": "2",
"num_of_baths": "2.5",
"city":"Atlanta",
},
]

小开

提出这个问题时考虑了多种结果，在这种情况下，filter是正确的方法，正如这里的其他回答者已经指出的那样。

然而，由于这个问题已经成为一个流行的重复目标，我应该提到，如果你正在寻找只有一个元素满足条件，你不需要filter，而是可以使用find。它以同样的方式工作，但它只是返回第一个匹配的元素，如果没有元素匹配，则返回undefined，而不是返回一个匹配数组:

const data = [
{ id: 1, value: 10 },
{ id: 2, value: 20 },
{ id: 3, value: 30 }
]


console.log(data.filter(o => o.value > 15))
// Output: [{ id: 2, value: 20 }, { id: 3, value: 30 }]


console.log(data.find(o => o.value > 15))
// Output: { id: 2, value: 20 }


console.log(data.filter(o => o.value > 100))
// Output: []


console.log(data.find(o => o.value > 100))
// Output: undefined


// `find` is often useful to find an element by some kind of ID:
console.log(data.find(o => o.id === 3))
// Output: { id: 3, value: 30 }

小开

使用数组过滤数据

const pickupData = [
{
id: 2876635,
pickup_location: "6311cdacf6b493647d86",
address_type: null,
address: "999, Jagarati",``
address_2: "Vihar",
updated_address: false,
old_address: "",
old_address2: "",
city: "Meerut",
state: "Uttar Pradesh",
country: "India",
pin_code: "250001",
email: "938@gmail.com",
is_first_mile_pickup: 0,
phone: "76898",
name: "Aa",
company_id: 2889808,
gstin: null,
vendor_name: null,
status: 2,
phone_verified: 1,
lat: null,
long: null,
warehouse_code: null,
alternate_phone: null,
rto_address_id: 2867270,
lat_long_status: 0,
new: 1,
associated_rto_address: null
},
{
id: 2872407,
pickup_location: "6311cdad490cf6b493647d82",
address_type: null,
address: "Nagar",
address_2: "Delhi",
updated_address: false,
old_address: "",
old_address2: "",
city: "Bijnor",
state: "Uttar Pradesh",
country: "India",
pin_code: "246701",
email: "ima@gmail.com",
is_first_mile_pickup: 0,
phone: "75398",
name: "Amit Sharma",
company_id: 2889808,
gstin: null,
vendor_name: null,
status: 1,
phone_verified: 1,
lat: null,
long: null,
warehouse_code: null,
alternate_phone: null,
rto_address_id: 2867270,
lat_long_status: 0,
new: 1,
associated_rto_address: null
}
];

const shiprocketData = [ ｛第一行:999,Jagarati" 么:“Vihar" 城市:“Meerut", 州:"Uttar Pradesh" pincode: 250001, :“India", isCurrent:没错, _id:“6311 cdad490cf6b3647d86" }，｛第一行:999,Jagarati" 么:“Vihar" 城市:“Meerut", 州:"Uttar Pradesh" pincode: 250001, :“India", isCurrent:没错, _id:“6311 cdad490cb493647d82" }，｛第一行:999,Jagarati" 么:“Vihar" 城市:“Meerut", 州:"Uttar Pradesh" pincode: 250001, :“India", isCurrent:没错, _id:“6311 cdad490cf693647d89" ｝ < / p >);

const updatedData = () => {
const data = pickupData.filter(
(item, index) =>
item.pickup_location === shiprocketData.map((item) => item._id)[index]
);
return console.log(data);
};