Filtered JSON arrays to push into one array?

Question

I want to filter cars in one array. So in html code, there are a lot of checkboxes. If I check the gasoline checkbox, then in the filtered array should be only the cars with gasoline, when I check the doors4 checkbox, in the filtered array should be the gasoline cars with 4 doors. etc. So how can I resolve this? Between I try to make the same as this one here: https://www.kia.com/de/modelle/entdecken-sie-die-kia-modelle/ - when you click on the big black button, then there will be a filter.

I know how to filter it by Key-value, but that's it, I don't know what should be the next step.

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"
        }
    ]
}

Answer 1

Use Array.prototype.every on an object with the conditions you want

 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)

Answer 2

A filter returns an array, so you can always just chain filters if that works best for your solution.

 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);