Filter an array using multiple selection options-CodePudding

I'm a beginner in JavaScript, and I'm trying to filter an array of vehicles, using dropdown menus, the first filter shows it by brand name, then the second filter by type of vehicle. Filters seem to work just fine but when I select a brand and then a type it shows me all the array of items using the type filter, and ignores the brand filter

Array:

const Data = [
  {
    brand: "Volkswagen",
    type: "Car",
    model: "Golf",
    year: "2019",
    price: "$12,000",
  },
  {
    brand: "Volkswagen",
    type: "Truck",
    model: "Tiguan",
    year: "2020",
    price: "$20,000",
  },
  {
    brand: "Mazda",
    type: "Car",
    model: "Mazda 3",
    year: "2022",
    price: "$32,000",
  },
  {
    brand: "Mazda",
    type: "Truck",
    model: "Mazda 6",
    year: "2021",
    price: "$29,000",
  },
  {
    brand: "Tesla",
    type: "Car",
    model: "Model S",
    year: "2023",
    price: "$42,000",
  },
  {
    brand: "Tesla",
    type: "Truck",
    model: "Model X",
    year: "2020",
    price: "$50,000",
  },
];

Functions:

const getSelectedValue = () => {
  let brandSelection = document.getElementById("brandDropdown").value;
  let selection = document.getElementById("dropDownSelection");
  //   show all cars
  if (brandSelection === "All") {
    selection.innerHTML = "";
    Data.forEach((car) => {
      selection.innerHTML  = `<div >
            <h3>${car.brand}</h3>
            <p>${car.type}</p>
            <p>${car.model}</p>
            <p>${car.year}</p>
            <p>${car.price}</p>
        </div>`;
    });
  }
  //   show selected brand
  else {
    selection.innerHTML = "";
    Data.forEach((car) => {
      if (car.brand === brandSelection) {
        selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
      }
    });
  }

  console.log(brandSelection);
};

// filter by type when brand is selected

const getSelectedType = () => {
  let typeSelection = document.getElementById("typeDropdown").value;
  let selection = document.getElementById("dropDownSelection");
  //   show all cars
  if (typeSelection === "All") {
    selection.innerHTML = "";
    Data.forEach((car) => {
      selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
    });
  }
  //   show selected type
  else {
    selection.innerHTML = "";
    Data.forEach((car) => {
      if (car.type === typeSelection) {
        selection.innerHTML  = `<div >
                    <h3>${car.brand}</h3>
                    <p>${car.type}</p>
                    <p>${car.model}</p>
                    <p>${car.year}</p>
                    <p>${car.price}</p>
                </div>`;
      }
    });
  }

  console.log(typeSelection);
};


HTML:

<body>

    <div >
        <div >
            <select name="" id="brandDropdown" onchange="getSelectedValue()">
                <option value="All">All</option>
                <option value="Volkswagen">Volkswagen</option>
                <option value="Mazda">Mazda</option>
                <option value="Tesla">Tesla</option>
            </select>
        </div>
        <div >
            <select name="" id="typeDropdown" onchange="getSelectedType()">
                <option value="">Type</option>
                <option value="All">All</option>
                <option value="Car">Car</option>
                <option value="Truck">Truck</option>
            </select>
        </div>
    </div>

    <div  id="dropDownSelection">

    </div>

</body>

CodePudding user response：

Maybe you can take a look on this code

// JAVASCRIPT

....

const getSelected = () => {
  let typeSelection = document.getElementById('typeDropdown').value;
  let brandSelection = document.getElementById('brandDropdown').value;
  let selection = document.getElementById('dropDownSelection');
  // Show all cars
  if (brandSelection === 'All' && typeSelection === 'All') {
    selection.innerHTML = '';
    Data.forEach((car) => {
      selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
    });
  }
  // Show selected brand
  else if (brandSelection !== 'All' && typeSelection === 'All') {
    selection.innerHTML = '';
    Data.filter((car) => car.brand === brandSelection).forEach((car) => {
      selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
    });
  // Show selected type
  } else if (brandSelection === 'All' && typeSelection !== 'All') {
    selection.innerHTML = '';
    Data.filter((car) => car.type === typeSelection).forEach((car) => {
      selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
    });
  // show selected brand and type
  } else {
    selection.innerHTML = '';
    Data.filter(
      (car) => car.brand === brandSelection && car.type === typeSelection,
    ).forEach((car) => {
      selection.innerHTML  = `<div >
                <h3>${car.brand}</h3>
                <p>${car.type}</p>
                <p>${car.model}</p>
                <p>${car.year}</p>
                <p>${car.price}</p>
            </div>`;
    });
  }
};

....

// HTML

....

<div >
  <div >
    <select name="" id="brandDropdown" onchange="getSelected()">
      <option value="All">All</option>
      <option value="Volkswagen">Volkswagen</option>
      <option value="Mazda">Mazda</option>
      <option value="Tesla">Tesla</option>
    </select>
  </div>
  <div >
    <select name="" id="typeDropdown" onchange="getSelected()">
      <option value="">Type</option>
      <option value="All">All</option>
      <option value="Car">Car</option>
      <option value="Truck">Truck</option>
    </select>
  </div>
</div>

....

As you can see the 2 dropdown list only call one function getSelected(), it because if you do 2 filters you must combine them with each other not separated into 2 functions. i hope this will help thank you