How can I filter an array with multiple conditions in JavaScript?

Question

This is my problem:
I have a dropdown menu on my page where the user can click on various menus with each have 3 options. I want to show only the cars which fit the options that were clicked (I have provided part of my HTML code, I hope this will suffice)

Brands:
option 1 = all brands;
option 2 = Seat;
option 3 = Skoda;

Price:
option 1 = all prices;
option 2 = under 35000;
option 3 = over 35000;

Type:
option 1 = all types;
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 is a global array my JSON data was pushed into

In theory I know that I have to iterate over allCars with a for loop and inside it ask with multiple if wether a condition is true and if it is,
check for the second and third conditions and pushing the result into filteredCars
but I'm struggling where to put what exactly.

What I am also worried about is how I can properly check for the price, because to me it looks like the price inside the JSON is a string and not a number?

I'll be thankful for any input and will try to figure out how to update my question if I can achieve what I need (oh annd please try to explain in really simple terms, I am often easily confused as you might notice^^)

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>

`parseFloat("12000,00 €")` should ignore the € and return `12000`. — 001, Sep 28 '21 at 18:02

score 1 · Answer 1 · answered Sep 28 '21 at 18:15

Assuming your data set contains all cars with some properties, ready for filtering.

The pull downs contains only for wanted parts a value for all just an empty string. This information is not needed for filtering.

By submitting the formular, you need to collect the options, assign the value to the corresponding variables, like brand and if not an empty string add a predefined function, like

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

to an array of functions fns.

The filtering works then with Array#filter and Array#every:

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

For filtering numerical values add the number without formatting and currency and select the function with an object, like

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

Add one of the function, depending on selection to fns array.

How can I filter an array with multiple conditions in JavaScript?

1 Answers1