Javascript: как фильтровать массив объектов на основе атрибутов?
у меня есть следующие JavaScript-массив недвижимого имущества предметов домашней обстановки:
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) ...
]
}
var xmlhttp = eval('(' + json + ')');
homes = xmlhttp.homes;
то, что я хотел бы сделать, это иметь возможность выполнить фильтр на объекте, чтобы вернуть подмножество "домашних" объектов.
например, я хочу иметь возможность фильтровать по: price,sqft,num_of_beds и num_of_baths.
вопрос: как я могу выполнить что-то в JavaScript, как псевдо-код ниже:
var newArray = homes.filter(
price <= 1000 &
sqft >= 500 &
num_of_beds >=2 &
num_of_baths >= 2.5 );
Примечание, синтаксис не имеет чтобы быть точно как выше. Это всего лишь пример.
10 ответов:
можно использовать
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 5th Edition стандартный, и его можно найти практически во всех современных браузерах.
для 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
Я предпочитаю структуру подчеркивания. Он предлагает много полезных операций с объектами. Ваша задача:
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; });
вы могли бы сделать это довольно легко - вероятно, есть много реализаций, которые вы можете выбрать, но это моя основная идея (и, вероятно, есть какой-то формат, где вы можете перебирать объект с помощью 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; });таким образом, вы можете вызвать фильтр на основе любого предиката, который вы определяете, или даже фильтровать несколько раз, используя меньшие фильтры.
вы можете использовать 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 });
вы можете реализовать метод фильтра самостоятельно, что соответствует вашим потребностям, вот как:
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)); });надеюсь, это поможет!
или вы можете просто использовать
$.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();и вы можете добавить столько фильтров, сколько вы хотите (только один на свойство)
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);вы можете использовать эту функцию Lambda. Более подробно можно найти здесь, так как мы фильтруем данные, основанные на том, что у вас есть условие, которое возвращает true или false, и оно будет собирать данные в другом массиве, поэтому ваш фактический массив не будет изменен.
@JGreig пожалуйста, посмотрите в него.
Comments