Пуш в массив объектов в соответствующие категории, если они уже есть

Question

За заголовок простите, не смог его сформулировать лучше.

Есть (ну как есть - я его создаю) массив объектов вида:

Часть элементов принадлежит к типу - Сезон, часть - к Размеры, хочу их объединить по категориям, получается так, что при пуше каждый раз создаётся новый объект. Подскажите пожалуйста, как пушить в массив так, чтобы он имел такой вид?

Вот как это делаю я, очевидно, что я далёк от правильного решения. Линк на песочницу.

function filterFunc() {
  let checkboxInputs = $('input[type="checkbox"]'),
      tempArr = [];
  
  checkboxInputs.on('click', function() {
    $(this).each(function() {
      let currentFilterTypeName = $(this).closest('.form-group').find('.title').text().trim(),
          currentFilterItemID = $(this).attr('id'),
          currentFilterItemValue = $(this).closest('li').find('label').text().trim();
    
          tempArr.push({
            currentFilterTypeName: currentFilterTypeName,
            currentFilterItemID: [currentFilterItemID],
            currentFilterItemValue: [currentFilterItemValue]
          });
    })
    
    console.log(tempArr);
  });
}
filterFunc();

ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.title {
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

Answer 1

В общем, удалось сделать это самому, может кому пригодится.

let filterForm = $('#catalogFilters');

function showSelectedFilters() {
    let filterGroup = filterForm.find('.form-group'),
        checkboxInput = filterForm.find('input[type="checkbox"]'),
        collectFilterArr = [];

    function checkboxSelected() {
        checkboxInput.on('click', function() {
            collectFilterArr = [];
            collectFilterData();
                        
            console.log(collectFilterArr);
        })
    }
    checkboxSelected();

    /* collect filters data */
    function collectFilterData() {
        filterGroup.each(function () {
            let valuesArr = [],
                idArr = [],
                checkedItems = $(this).find('input[type="checkbox"]:checked');

            if (checkedItems.length > 0) {
                checkedItems.each(function () {
                    let values = $(this).closest('li').find('label').text().trim();

                    valuesArr.push(values);
                });

                collectFilterArr.push({
                    type: $(this).closest('.form-group').find('.title').text().trim(),
                    value: valuesArr
                });
            }
        });
    }
}
showSelectedFilters();

ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.title {
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="catalogFilters" class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Пуш в массив объектов в соответствующие категории, если они уже есть

Ответы (1 шт):