Как объединить ключи и значения объекта или 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="svfilter_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="svfilter_category[]">
                        <label for="category-input-1">Газобетонные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-2" type="checkbox" value="62" name="svfilter_category[]">
                        <label for="category-input-2">Деревянные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-3" type="checkbox" value="68" name="svfilter_category[]">
                        <label for="category-input-3">Керамо-блочные дома</label>
                    </div>
                    <div class="filter-select">
                        <input id="category-input-4" type="checkbox" value="66" name="svfilter_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="svfilter_style[]">
                        <label for="style-input-1">Фахверк</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-2" type="checkbox" value="Хайтек" name="svfilter_style[]">
                        <label for="style-input-2">Хайтек</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-3" type="checkbox" value="Современный" name="svfilter_style[]">
                        <label for="style-input-3">Современный</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-4" type="checkbox" value="Кантри" name="svfilter_style[]">
                        <label for="style-input-4">Кантри</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-5" type="checkbox" value="Барнхаус" name="svfilter_style[]">
                        <label for="style-input-5">Барнхаус</label>
                    </div>
                    <div class="filter-select">
                        <input id="style-input-6" type="checkbox" value="Райт" name="svfilter_style[]">
                        <label for="style-input-6">Райт</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

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

https://site/catalog?svfilter_place=125;557&svfilter_category=67,62

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

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

то получаю

myForm [{"name":"svfilter_place","value":"125;557"},{"name":"svfilter_category","value":"67"},{"name":"svfilter_category","value":"62"}]

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

https://site/catalog?svfilter_place=125;557&svfilter_category=62&svfilter_category=63

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

Comments

[Aetae]

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

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

[WbICHA]

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

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

WbICHA,

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

https://site/catalog?svfilter_place=125;557&svfilter_category=62&svfilter_category=63

а точнее так не отправляется (ломается)
&svfilter_category=62&svfilter_category=63

поэтому нужно вот так

&svfilter_category=62,63

[0xD34F]

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

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

0xD34F,

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

[Евгений]

Идиотский вопрос, а зачем тут вообще нужен Java Script? Если в форме будет кнопка submit то get-запрос сам соберется формой по отправке.

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

Евгений,

на бурж форумах разработчики любезно общаются, а у нас идиоты?

при отправке кнопкой submit, данные с одинаковыми name например:

<input type="checkbox" value="62" name="svfilter_category" checked>
<input type="checkbox" value="63" name="svfilter_category" checked>
<input type="checkbox" value="67" name="svfilter_category" checked>

GET запрос получается такой

/catalog/?svfilter_category=67

и на сервер прилетает только один параметр svfilter_category

Array
(
    [_route_] => catalog/
    [svfilter_category] => 67
    [path] => 61
    [route] => product/category
)

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

Евгений,
а если svfilter_category сделать массивом

<input type="checkbox" value="62" name="svfilter_category[]" checked>
<input type="checkbox" value="63" name="svfilter_category[]" checked>
<input type="checkbox" value="67" name="svfilter_category[]" checked>

GET запрос получается такой

/catalog/?svfilter_category=0%3D62&amp%3B1=63&amp%3B2=67

для читаемости подкорректирую
/catalog/?svfilter_category=0=67&;1=62&;2=68

и на сервер прилетает только один параметр svfilter_category

Array
(
    [_route_] => catalog/
    [svfilter_category] => 0=62
    [amp;1] => 63
    [amp;2] => 67
    [path] => 61
    [route] => product/category
)

[Евгений]

Сергей Василенко, тогда очевидно нужно использовать POST, от себя лишь могу сказать, что собирать GET из полей формы при помощи JS это моветон.

[Евгений]

Сергей Василенко, и можно что-то типа такого использовать, если уж сильно надо GET:

<input type="checkbox" value="1" name="svfilter_category_62" checked>
<input type="checkbox" value="1" name="svfilter_category_63" checked>
<input type="checkbox" value="1" name="svfilter_category_64" checked>

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="svfilter_category"