如何在JavaScript中过滤具有多个条件的数组?



这是我的问题:
我有一个下拉菜单在我的页面上,用户可以点击各种菜单,每个有3个选项。我想只显示适合被单击的选项的汽车(我提供了一部分HTML代码,我希望这足够了)

Brands:
option 1 = all Brands;
选项2 =座位;
option 3 = Skoda;

价格:
选项1 =所有价格;
选项2 =低于35000;
选项3 =超过35000;

类型:
选项1 =所有类型;
option 2 = new;
option 3 = used;

//JSON data snippet
{
"vehicle": [{
"id": 1,
"brand": "Seat",
"name": "Seat Ibiza 5V",
"price": "12000,00 €",
"description_small": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"images": [
"ibiza_1.jpg",
"ibiza_2.jpg",
"ibiza_3.jpg"
],
"detail": {
"vehicleStand": "Unfallfrei",
"origin": "Deutschland",
"mileage": "120.000km",
"displacement": "1.198 cm³",
"power": "69ps",
"fuelType": "Benzin",
"consumption": [
"Kombiniert: ca. 3.4l/100km",
"Inneerorts: ca. 5.1l/100km",
"Außerorts: ca. 4.5l/100km"
],
"seats": 5,
"doors": "2/3",
"transmission": "Schaltgetriebe",
"pullutionClass": "Euro 5",
"environmentalBadge": "Grün",
"initialRegistration": "10/2013",
"vehicleOwner": 1
}
},]
};
//JSON data end. the JSON has 4 more "vehicles" in it
// the whole JSON data is pushed into this array, but I thought that wasn"t relevant for my problem so I didn"t include it

allCars是一个全局数组,我的JSON数据被推入

理论上我知道我必须遍历allCars有一个for循环,在它里面问多个如果条件是否为真,如果是,
检查第二个和第三个条件,并将结果推入filteredCars
,但我在哪里挣扎到底放什么。

我还担心的是如何正确检查价格,因为对我来说,JSON中的价格看起来像是字符串而不是数字?

我将感谢任何输入,并将尝试找出如何更新我的问题,如果我能达到我所需要的(哦,请尝试用非常简单的术语解释,我经常很容易混淆,你可能会注意到^^)

let allCars = [];
function getSelectedOptions() {
var brand = document.getElementById('brands').value;
var price = document.getElementById('prices').value;
var type = document.getElementById('types').value;
carsFilter(brand, price, type);
}
function carsFilter(brand, price, type) {
var filteredCars = [];
for (i = 0; i < allCars.length; i++) {
if (brand == 'all' || brand == allCars[i].brand) {
if (price == 'allPrices' || price == allCars[i].price) {
if (type == 'allTypes' || type == allCars[i].vehicleOwner) {
}
}
}
filteredCars.push(allCars[i].brand);
filteredCars.push(allCars[i].price);
filteredCars.push(allCars[i].vehicleOwner);
}
showCars(filteredCars);
//a function which will then show the result cars I get out of the filter
}
<!DOCTYPE html>
<label for="brands">Brands</label>
<select id="brands" name="carBrands">
<option value="all">All</option>
<option value="seat">Seat</option>
<option value="skoda">Škoda</option>
</select>
<label for="prices">Prices</label>
<select id="prices" name="carPrices">
<option value="allPrices">All</option>
<option value="underPrice">under 35000,00</option>
<option value="overPrice">over 35000,00</option>
</select>
<label for="types">New and used cars</label>
<select id="types" name="carTypes">
<option value="allTypes">All</option>
<option value=0>New</option>
<option value=1>Usedt</option>
</select>

假设您的数据集包含所有具有某些属性的汽车,准备进行过滤。

下拉列表只包含所需部件所有的值只是一个空字符串。过滤不需要此信息。

通过提交公式,您需要收集选项,将值分配给相应的变量,如brand,如果不是空字符串,则添加预定义函数,如

brandFn = o => o.brand === brand
^ content of pull down
^ property of an item 
^ item/object

转换为函数数组fns.

Array#filterArray#every起过滤作用:

result = data.filter(o => fns.every(fn => fn(o)));

对于过滤数值,添加数字而不格式化和货币,并选择带有对象的函数,如

pricesFns = {
under: o => o.price < 35000,
over: o => o.price >= 35000
}

添加一个函数,根据选择fns数组

最新更新