JavaScript Array фильтрует динамически

Question

Я хочу отфильтровать массив на основе выпадающего списка.Как я могу это сделать

Мой выпадающий список

<select class="custom-select" name="" id="Seats">
            <option selected value="">Any</option>
            <option value="le 5"><= 5</option>
            <option value="le 10"><= 10</option>
            <option value="le 15"><= 15</option> 
            <option value="le 20"><= 20</option>
            <option value="le 25"><= 25</option>
            <option value="le 30"><= 30</option> 
            <option value="le 35"><= 35</option> 
            <option value="le 50"><= 50</option> 
            <option value="gt 50">> 50</option>
          </select>

И я фильтрую что-то вроде этого (Пожалуйста, обратите внимание, что в наличииRooms is arraylist)

availableRooms = availableRooms.filter(d => d.Seats > 50)

, но я выглядел динамичнозапрос

availableRooms = availableRooms.filter(d => d.Seats $("#Seats option:selected").text().trim())

последняя строка дает мне ошибку, как мы можем это сделать

Answer 1

Вам нужно будет определить префиксы le и gt и обработать их специально (если только вы не хотите использовать eval, чего вам следует избегать, где можете - и вы можете здесь).Например:

$("#Seats").on("change", function() {
    let [op, value] = $(this).val().split(" ");
    value = +value; // Make it a number
    let filtered;
    if (op == "le") {
        filtered = availableRooms.filter(d => d.Seats <= value);
    } else { // Assume "gt"
        filtered = availableRooms.filter(d => d.Seats > value);
    }
    console.log(filtered);
});

Live Пример:

const availableRooms = [
  {Seats: 51},
  {Seats: 50},
  {Seats: 49},
  {Seats: 34},
  {Seats: 29}
];

$("#Seats").on("change", function() {
    let [op, value] = $(this).val().split(" ");
    value = +value; // Make it a number
    let filtered;
    if (op == "le") {
        filtered = availableRooms.filter(d => d.Seats <= value);
    } else { // Assume "gt"
        filtered = availableRooms.filter(d => d.Seats > value);
    }
    console.log(filtered);
});

<select class="custom-select" name="" id="Seats">
    <option selected value="">Any</option>
    <option value="le 5"><= 5</option>
    <option value="le 10"><= 10</option>
    <option value="le 15"><= 15</option> 
    <option value="le 20"><= 20</option>
    <option value="le 25"><= 25</option>
    <option value="le 30"><= 30</option> 
    <option value="le 35"><= 35</option> 
    <option value="le 50"><= 50</option> 
    <option value="gt 50">> 50</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Разделить выбранный вариант на основе ' ', а затем проверить, является ли первая часть 'le' или 'ge'.На основании этого сделайте соответствующее сравнение.

Вы можете использовать String.prototype.split () .Метод split () разделяет объект String на массив строк, разделяя строку на подстроки, используя указанную строку-разделитель для определения места каждого разбиения.

availableRooms = availableRooms.filter(d => {
  var selectedOption=$("#Seats option:selected").text().trim().split(' ');
  if(selectedOption[0]==='le') {
    return d.Seats <= parseInt(selectedOption[1],10);
  } else if(selectedOption[0]==='ge') {
    return d.Seats > parseInt(selectedOption[1],10);    
  }
})

Answer 3

Я бы посоветовал подойти к этой задаче с помощью Vanilla JavaScript (то есть без jQuery).Вы можете получить элемент <select> следующим образом:

var dropdownEl = document.getElementById("Seats");

И затем получить доступ к выбранному параметру следующим образом:

var dropdownValue = dropdownEl.options[dropdownEl.selectedIndex].value;

И затем выполнить фильтрацию так, как вам нужно (при условии, что правило фильтрацииэто то, что вы написали выше d.Seats > dropdownValue.trim()):

availableRooms = availableRooms.filter(d => d.Seats > dropdownValue.trim());

Еще одно важное замечание Если бы вы могли превратить значения параметров в один объект или массив, содержащий параметры выпадающего меню, например:

var dropdownOptions: [
 {
   text: "<= 5",
   value: "le5"
 },
 {
   text: "<= 10",
   value: "le10"
 },
 {
   text: "<= 15",
   value: "le15"
 },
 ...
]

Вы могли бы легче визуализировать элементы <option> и передать свойство text для видимой части, а затем легко повторить value без необходимости разбирать выбранное значение, как высделал с .text() и .trim() или любым другим анализом, который вам может понадобиться в будущем для обработки необработанных значений - все это можно предотвратить, и вы также получите более элегантный и читаемый код.

Answer 4

var a = $("#Seats option:selected").val().split(' ');
availableRooms = availableRooms.filter(d => {
  if (a[0] == 'le')
    return d.Seats <= parseInt(a[1])
  else 
    return d.Seats > parseInt(a[1])
});