Как объединить ключи и значения объекта или get параметров строки?

Question

[Сергей Василенко]

Я понимаю как это сделать с использованием POST или AJAX, но как это сделать в классическом запросе?
Если форма фильтра

<form id="filter_get" class="filter" method="GET">
    <!-- первая колонка имеет скрытый input который наполняется ползунком -->
    <div class="filter-col">
        <div class="filter-item filter-item-2x">
            <a class="filter-heading">Площадь дома</a>
            <div id="place_get">
                <input name="maxfilter_place" value="125;557">
            </div>
        </div>
    </div>

    <!-- вторая колонка имеет input-ы checkbox -->
    <div class="filter-col">
        <div class="filter-item">
            <a class="filter-heading">Тип дома</a>
            <div id="stage" class="filter-hidden-wrapper">
                <div class="filter-stage">
                    <div class="filter-select">
                        <input id="category-input-1" type="checkbox" value="67" name="maxfilter_category[]">
                        <label for="category-input-1">Газобетонные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-2" type="checkbox" value="62" name="maxfilter_category[]">
                        <label for="category-input-2">Деревянные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-3" type="checkbox" value="68" name="maxfilter_category[]">
                        <label for="category-input-3">Керамо-блочные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-4" type="checkbox" value="66" name="maxfilter_category[]">
                        <label for="category-input-4">Кирпичные дома</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="filter-item">
            <a class="filter-heading">Архитектурный стиль</a>
            <div id="style" class="filter-hidden-wrapper">
                <div class="filter-stage">
                    <div class="filter-select">
                        <input id="style-input-1" type="checkbox" value="Фахверк" name="maxfilter_style[]">
                        <label for="style-input-1">Фахверк</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-2" type="checkbox" value="Хайтек" name="maxfilter_style[]">
                        <label for="style-input-2">Хайтек</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-3" type="checkbox" value="Современный" name="maxfilter_style[]">
                        <label for="style-input-3">Современный</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-4" type="checkbox" value="Кантри" name="maxfilter_style[]">
                        <label for="style-input-4">Кантри</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-5" type="checkbox" value="Барнхаус" name="maxfilter_style[]">
                        <label for="style-input-5">Барнхаус</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-6" type="checkbox" value="Райт" name="maxfilter_style[]">
                        <label for="style-input-6">Райт</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Мне нужно отправить через адресную строку GET параметры такого вида:

https://site/catalog?maxfilter_place=125;557&maxfilter_category=67,62

Когда я сериализую данные

$('#button-filter').on('click', function() {
    var myForm  = $("#filter_get").serializeArray();
})

то получаю

myForm [{"name":"maxfilter_place","value":"125;557"},{"name":"maxfilter_category","value":"67"},{"name":"maxfilter_category","value":"62"}]

если конвертировать этот Объект в строку, то получаю одинаковые ключи....

https://site/catalog?maxfilter_place=125;557&maxfilter_category=62&maxfilter_category=63

а такой GET параметр при отправке ломается

Comments

[Aetae]

Ну так конвертируй в строку по другому. Это базовые манипуляции..

Всякие библиотеки усеют это настраивать, типа qs и axios, но если ты делаешь руками сам - то самому всё и придётся делать. В чём у тебя сложность?

[WbICHA]

И? Вопрос в чём? Пока что это задача, а не вопрос.

[Сергей Василенко]

WbICHA, Вопрос в центре, вот:
Мне нужно отправить через адресную строку GET параметры такого вида:

https://site/catalog?maxfilter_place=125;557&maxfilter_category=62&maxfilter_category=63

[0xD34F]

Сергей Василенко, это не вопрос. Это задача, которая перед тобой стоит.

[Сергей Василенко]

0xD34F, Как собрать данные с одинаковыми атрибутами name для классического get запроса ?
или вопрос из шапки
Как объединить ключи и значения объекта или get параметров строки?
или
Как преобразовать данные формы в строку с параметрами? Каждый параметр включает ключ и значение, соединённые знаком «=». Множественные значения (например, для чекбоксов) могут быть сериализованы через запятую.

Answer 1

[Сергей Василенко]

Решил таким способом

$('#button-filter').on('click', function() {
    var params = $("#filter_get").serializeArray();
    var result = {};

    $.each(params, function(_, field) {
        if (result[field.name]) {
            result[field.name] += ',' + field.value;
        } else {
            result[field.name] = field.value;
        }
    });

    var queryString = $.param(result);
    var page_link = '{{action}}';//URL страницы без get параметров (TWIG)
    window.location = page_link + '?' + queryString;
});

И все параметры name без квадратных скобок

name="maxfilter_category"