Javascript динамика c значения флажков в виде массива

Question

Сейчас у меня есть файл json, содержащий список транспортных средств. У меня есть страница поиска, которая позволяет пользователям фильтровать инвентарь с помощью флажков, таких как марка, модель, цвет и т. Д. c ..

Мне нужно передать значения флажков в виде массива. Например, если я выберу флажки для Mustang и Camaro, это должно быть 'Model' => ['Mustang', 'Camaro'].

Я попытался создать 2 массива. Один для ключей (Марка, Модель, Цвет), et c ... и другой для каждого значения (Мустанг и Камаро). Некоторые значения могут иметь один элемент, некоторые - несколько. Например, если нам нужны все красные Мустанги и Камаро, массив должен выглядеть так:

['Model' => ['Mustang', 'Camaro'],Color' => ['Red']];

Или просто красные Мустанги:

['Model' => ['Mustang'],Color' => ['Red']];

Я могу oop каждый из флажки, и я попытался поместить все имена флажков (data.id) в качестве ключа и второй массив (data.value) в качестве значений. Если ключ существует, добавьте каждое из значений, имеющих один и тот же ключ.

var kv=[]; // Keys
var vv=[]; // Array of the values for each key.

$("[name='checkBoxItem']").each(function (index, data) {
   if (data.checked) {
          if(!(data.id in kv)){  // Is always called.
               alert("Does't exist, adding : " + data.value);
               kv.push(data.id);
               vv.push(data.value);
                  } else {
                    vv.push(data.value);
                  }
              checked.push({[kv]: vv});
            }
        });

Мой код возвращает:

Array ( [selected_values] => Array([0] => Array ([Make] => Array([0] => Mustang))))

Что близко, но if(!(data.id in kv)) всегда вызывается, не позволяя мне добавить несколько вариантов выбора.

Прошу прощения, если кодеры блокируют то, что я должен был сделать.

Answer 1

Поскольку вы используете jQuery в своем примере, я предполагаю, что не проблема использовать его также для получения фактических значений данных, поэтому я буду использовать его в моем примере :)

Вы можете найдите здесь рабочий пример, в котором у вас есть несколько флажков и кнопка для сбора значений флажков.

$("#getvalues").on("click", function() {
  var result = {};
  $("input").each(function(index, el) {
    if (el.checked) {
      var id = $(el).data("id");
      var val = $(el).data("value");
      if (!result[id]) result[id] = [];
      result[id].push(val);
    }
  });
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-id="model" data-value="Camaro" >Camaro</input></br>
    <input type="checkbox" data-id="model" data-value="Mustang" >Mustang</input></br>
    Color</br>
    <input type="checkbox" data-id="color" data-value="Red" >Red</input></br>
    <input type="checkbox" data-id="color" data-value="Blue" >Blue</input></br>
    <input type="checkbox" data-id="color" data-value="Green" >Green</input></br>
    <button id="getvalues">
      GET SELECTED VALUES
    </button>