Как отфильтровать массив объектов по атрибутам?
У меня есть следующий массив объектов недвижимости на 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",
},
// ... (другие дома) ...
]
}
var xmlhttp = eval('(' + json + ')');
homes = xmlhttp.homes;
Я хочу отфильтровать этот объект, чтобы получить подмножество объектов "home".
Например, я хочу иметь возможность фильтровать по параметрам: 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 );
Обратите внимание, что синтаксис не обязательно должен быть точно таким, как выше. Это только пример.
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 filteredHomes = json.homes.filter( x =>
x.price <= 1000 &&
x.sqft >= 500 &&
x.num_of_beds >= 2 &&
x.num_of_baths >= 2.5
);
Вы можете попробовать использовать фреймворк jLinq. Вот пример кода, демонстрирующий использование jLinq:
var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();
Для получения дополнительной информации вы можете перейти по ссылке: https://github.com/hugoware/jLinq.
Я предпочитаю использовать фреймворк Underscore. Он предлагает множество полезных операций с объектами.
Ваш код:
var newArray = homes.filter(
price <= 1000 &&
sqft >= 500 &&
num_of_beds >= 2 &&
num_of_baths >= 2.5);
можно переписать с использованием Underscore так:
var newArray = _.filter(homes, function(home) {
return home.price <= 1000 && home.sqft >= 500 && home.num_of_beds >= 2 && home.num_of_baths >= 2.5;
});
Надеюсь, это будет полезно для вас!
Для решения задачи фильтрации объектов в массиве homes
из вашего JSON-объекта, вы можете использовать метод filter
. Он позволяет отобрать только те элементы, которые соответствуют определенным условиям. Приведенный вами код уже достаточно близок к нужному. Вам нужно немного доработать условие фильтрации. Обратите внимание, что для сравнения чисел лучше использовать двойной амперсанд (&&
), а не одиночный (&
). Вот исправленный код:
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 =>
parseInt(d.price) >= 1000 && // Сравниваем цену, конвертируем в число
parseInt(d.sqft) >= 500 && // Сравниваем площадь, конвертируем в число
parseInt(d.num_of_beds) >= 2 && // Сравниваем количество спален, конвертируем в число
parseFloat(d.num_of_baths) >= 2.5 // Сравниваем количество ванных, конвертируем в число
);
console.log(filter);
Пояснения:
- Метод
filter
проходит по каждому элементу массиваhomes
и возвращает новый массив, содержащий только те элементы, которые удовлетворяют указанным условиям. - Для корректного сравнения чисел мы используем
parseInt
для целых чисел иparseFloat
для десятичных. - В результате выполнения кода в
filter
будут находиться только те дома, которые соответствуют всем заданным критериям.
Надеюсь, это поможет вам!
Вот рабочий пример, который корректно работает в IE8 с использованием функции map
из jQuery:
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;
});
Этот код фильтрует массив объектов HOMES
, оставляя только те элементы, которые соответствуют заданным условиям по цене, площади и количеству спален и ванных комнат. Если цена менее или равна 1000, площадь больше или равна 500, а также минимум 2 спальни и 2.5 ванных комнаты, то объект возвращается. Весь остальной элемент массива игнорируется.
Обратите внимание, что использование Number()
здесь гарантирует, что строки будут правильно преобразованы в числа перед сравнением.
Как перенаправить на другую веб-страницу?
Где найти документацию по форматированию даты в JavaScript?
Как определить нажатие клавиши Esc?
Как проверить, содержит ли массив строку в TypeScript?
Ссылка и выполнение внешнего JavaScript-файла, размещенного на GitHub