Форум

Dtri · #1 (**permalink**) 02.06.2015, 06:33

Здравствуйте!

Есть метод serialize(), который собирает с формы все значения и упаковывает в строку формата x1=y1&x2=y2....

Есть ли метод наподобии serialize, который будет упаковывать в строку формата json. в таком виде:

{
"firstName": "Иван",
"lastName": "Иванов",
"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
},
"phoneNumbers": [
"812 123-1234",
"916 123-4567"
]
}

это случайно не serializeArray()???

но как используя этот метод сделать вложенность json в json как показано в примере

"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
}

тут json adress вложен в общий json/

laimas · #2 (**permalink**) 02.06.2015, 07:05

serializeArray() также работает с формой, а объект в json формат - JSON.stringify()

Dtri · #3 (**permalink**) 02.06.2015, 08:07

Сообщение от laimas

serializeArray() также работает с формой, а объект в json формат - JSON.stringify()

<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                $('.wrapper').html(JSON.stringify($(this).prev('form').serializeArray()));
            });
        </script>
    </body>

ответ выдаёт такого вида:

[{"name":"bublik","value":"1"},{"name":"bublik2","v alue":"2"},{"name":"bublik","value":"3"}]

Есть ли способ Придать этому вид
{
"bublik": [1,3],
"bublik2":2
}

не парся то что получилось и не перебирая массив. Возможно есть какие-то параметры у этого метода?

хотелось бы чтобы оно группировало значения инпутов с одинаковыми name

laimas · #4 (**permalink**) 02.06.2015, 08:27

Так вам все таки форму нужно серриализовать, а не объект имеющийся, зачем же тогда JSON.stringify.

А чтобы получилось так:

"bublik": [1,3],
"bublik2":2

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

<form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>

Это все что нужно сделать.

рони · #5 (**permalink**) 02.06.2015, 08:28

Dtri,

<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                var arr = $(this).prev('form').serializeArray(), obj = {};
                $.each(arr, function(indx, el){
                      obj[el.name] ? obj[el.name].push(el.value) : (obj[el.name] = [el.value]);
                      });
                $('.wrapper').html(JSON.stringify(obj));
            });
        </script>
    </body>

рони · #6 (**permalink**) 02.06.2015, 08:31

Dtri,
или так

<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                var arr = $("form input"), obj = {};
                $.each(arr, function(indx, el){
                      obj[el.name] ? obj[el.name].push(el.value) : (obj[el.name] = [el.value]);
                      });
                $('.wrapper').html(JSON.stringify(obj));
            });
        </script>
    </body>

laimas · #7 (**permalink**) 02.06.2015, 08:33

рони,
зачем?

Поля нужно правильно именовать, и этого достаточно. )

рони · #8 (**permalink**) 02.06.2015, 08:37

laimas,
да согласен, но вдруг ТС любит погорячее

laimas · #9 (**permalink**) 02.06.2015, 08:42

Может быть, бог его знает, может все-таки поля эти надо в готовый объект встроить (как по сути вопроса сначала), и передача асинхронная... )

Dtri · #10 (**permalink**) 02.06.2015, 09:00

Сообщение от laimas

Так вам все таки форму нужно серриализовать, а не объект имеющийся, зачем же тогда JSON.stringify.

А чтобы получилось так:

"bublik": [1,3],
"bublik2":2

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

<form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>

Это все что нужно сделать.

из вашего примера не выходит такой вид:

"bublik": [1,3],
"bublik2":2

вот что получается:

[{"name":"bublik[]","value":"1"},{"name":"bublik2","value":"2"},{"na me":"bublik[]","value":"3"}]

<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                $('.wrapper').html(JSON.stringify($(this).prev('form').serializeArray()));
            });
        </script>
    </body>

Форум

Справочник

Discord чат

Курсы javascript