#javascript #json
Вопрос:
Я хочу отфильтровать автомобили в одном массиве. Таким образом, в html-коде есть много флажков. Если я поставлю флажок бензин, то в отфильтрованном массиве должны быть только автомобили с бензином, когда я поставлю флажок doors 4, в отфильтрованном массиве должны быть бензиновые автомобили с 4 дверями. и т.д. Итак, как я могу решить эту проблему? Между тем я пытаюсь сделать то же самое, что и здесь: https://www.kia.com/de/modelle/entdecken-sie-die-kia-modelle/ — когда вы нажмете на большую черную кнопку, появится фильтр.
Я знаю, как отфильтровать его по значению ключа, но это все, я не знаю, каким должен быть следующий шаг.
let engineDiesel = cars.filter(model => model.engine === 'diesel');
let engineGasoline = cars.filter(model => model.engine === 'gasoline');
{
"models": [
{
"name": "Kia Picanto",
"category": "kompakt",
"image": "picanto.png",
"price": 10750,
"monthlyPrice": 122,
"engine": "gasoline",
"doors": 4,
"seats": 4,
"drive": "2wd",
"transmission": "manual",
"efficiency": "c"
},
{
"name": "Kia Rio",
"category": "kompakt",
"image": "rio.png",
"price": 14590,
"monthlyPrice": 147,
"engine": "hybrid",
"doors": 5,
"seats": 5,
"drive": "4wd",
"transmission": "automatic",
"efficiency": "a"
},
{
"name": "Kia Stonic",
"category": "suv",
"image": "stonic.png",
"price": 16650,
"monthlyPrice": 177,
"engine": "diesel",
"doors": 5,
"seats": 4,
"drive": "2wd",
"transmission": "automatic",
"efficiency": "d"
},
{
"name": "Kia e-Soul",
"category": "limusine",
"image": "e-Soul",
"price": 37590,
"monthlyPrice": 291,
"engine": "electro",
"doors": 4,
"seats": 4,
"drive": "4wd",
"transmission": "manual",
"efficiency": "a"
},
{
"name": "Kia Ceed",
"category": "gt",
"image": "ceed.png",
"price": 16990,
"monthlyPrice": 127,
"engine": "gasoline",
"doors": 5,
"seats": 5,
"drive": "2wd",
"transmission": "manual",
"efficiency": "a"
}
]
}
Ответ №1:
Используйте Array.prototype.every для объекта с требуемыми условиями
const data = {
"models": [{
"name": "Kia Picanto",
"category": "kompakt",
"image": "picanto.png",
"price": 10750,
"monthlyPrice": 122,
"engine": "gasoline",
"doors": 4,
"seats": 4,
"drive": "2wd",
"transmission": "manual",
"efficiency": "c"
},
{
"name": "Kia Rio",
"category": "kompakt",
"image": "rio.png",
"price": 14590,
"monthlyPrice": 147,
"engine": "hybrid",
"doors": 5,
"seats": 5,
"drive": "4wd",
"transmission": "automatic",
"efficiency": "a"
},
{
"name": "Kia Stonic",
"category": "suv",
"image": "stonic.png",
"price": 16650,
"monthlyPrice": 177,
"engine": "diesel",
"doors": 5,
"seats": 4,
"drive": "2wd",
"transmission": "automatic",
"efficiency": "d"
},
{
"name": "Kia e-Soul",
"category": "limusine",
"image": "e-Soul",
"price": 37590,
"monthlyPrice": 291,
"engine": "electro",
"doors": 4,
"seats": 4,
"drive": "4wd",
"transmission": "manual",
"efficiency": "a"
},
{
"name": "Kia Ceed",
"category": "gt",
"image": "ceed.png",
"price": 16990,
"monthlyPrice": 127,
"engine": "gasoline",
"doors": 5,
"seats": 5,
"drive": "2wd",
"transmission": "manual",
"efficiency": "a"
}
]
}
const query = {
engine: x => x === "gasoline" || x === "diesel",
doors: 4,
price: x => x > 1000
}
const result = data.models.filter(car => Object.entries(query).every(([key, value]) =>
(typeof value === "function") ? value(car[key]) : (car[key] === value)
))
console.log(result) Комментарии:
1. Но что, если мне понадобятся также дизельные автомобили с 4 дверями? Я не могу писать так,как запрос const = { двигатель: «бензин», двигатель: «бензин», двери: 4 }
2. @venndi Я изменил свой ответ, чтобы условия были функциями. Я надеюсь, что это ясно
3. ах, хорошо, я вижу, вы изменили свой код… Я попробую это сделать. Спасибо.
Ответ №2:
Фильтр возвращает массив, поэтому вы всегда можете просто цеплять фильтры, если это лучше всего подходит для вашего решения.
const cars = {
"models": [
{
"name": "Kia Picanto",
"category": "kompakt",
"image": "picanto.png",
"price": 10750,
"monthlyPrice": 122,
"engine": "gasoline",
"doors": 4,
"seats": 4,
"drive": "2wd",
"transmission": "manual",
"efficiency": "c"
},
{
"name": "Kia Rio",
"category": "kompakt",
"image": "rio.png",
"price": 14590,
"monthlyPrice": 147,
"engine": "hybrid",
"doors": 5,
"seats": 5,
"drive": "4wd",
"transmission": "automatic",
"efficiency": "a"
},
{
"name": "Kia Stonic",
"category": "suv",
"image": "stonic.png",
"price": 16650,
"monthlyPrice": 177,
"engine": "diesel",
"doors": 5,
"seats": 4,
"drive": "2wd",
"transmission": "automatic",
"efficiency": "d"
},
{
"name": "Kia e-Soul",
"category": "limusine",
"image": "e-Soul",
"price": 37590,
"monthlyPrice": 291,
"engine": "electro",
"doors": 4,
"seats": 4,
"drive": "4wd",
"transmission": "manual",
"efficiency": "a"
},
{
"name": "Kia Ceed",
"category": "gt",
"image": "ceed.png",
"price": 16990,
"monthlyPrice": 127,
"engine": "gasoline",
"doors": 5,
"seats": 5,
"drive": "2wd",
"transmission": "manual",
"efficiency": "a"
}
]
}
let engineGasolineWithFourDoors = cars.models
.filter(model => model.engine === 'gasoline')
.filter(model => model.doors === 4)
console.log(engineGasolineWithFourDoors); Комментарии:
1. Было бы миллион вариантов… это невозможно сделать таким образом. Существует около 40 флажков.
2. многократный обход массива также не идеален
3. Тогда другой ответ от бел3атара лучше. У каждого флажка есть прослушиватель событий изменения, который проверяет значение ваших флажков для создания объекта запроса. Тогда ответ бел3атара сделает все, что вам нужно, оттуда.