Публикация формы с использованием javascript и json с вложенными объектами

Question

У меня есть HTML-форма, которая имеет следующую структуру:

<input type="text" name="title" />
<input type="text" name="persons[0].name" />
<input type="text" name="persons[0].color" />
<input type="text" name="persons[1].name" />
<input type="text" name="persons[1].color" />

Я хотел бы сериализовать это в следующий JSON:

    {
            "title":"titlecontent",
            "persons":[
            {
                    "name":"person0name",
                    "color":"red"
            },
            {
                    "name":"person1name",
                    "color":"blue"
            }
            ]
    }

Обратите внимание, что количество людей может варьироваться от случая к случаю.

Структура html-формы может измениться, но структура отправленного json не может.

Как это сделать проще всего?

Answer 1

Зависимости:

• locutus (npm install locutus)
• JQuery

Код:

var parse_str = require('locutus/php/strings/parse_str');
parse_str($("#form ID").serialize(), var result = {});
console.log(result);

Answer 2

Эй, человек, использующий jQuery и jQuery JSON-плагин , я смог сделать следующее: Мне пришлось немного изменить ваш HTML:

<div id="Directory">
     <input type="text" class="title" />
     <span class="person 0">
       <input type="text" class="name" />
       <input type="text" class="color" />
     </span>
     <span class="person 1">
       <input type="text" class="name" />
       <input type="text" class="color" />
     </span>
</div>

И тогда я смог использовать следующий код для создания вашего массива JSON:

var Directory = {};
Directory.title = $("div#Directory input.title").val();
Directory.persons = [];
$("div#Directory span.person").each(function() {
    var index = $(this).attr("class").split(" ")[1];
    Directory.persons.push({ 
        name:"person" + index + $(this).children("input.name").val(),
        color:$(this).children("input.color").val(),
    });
});
alert($.toJSON(Directory));

Этот http: //stackoverflow.com/questions/492833/getting-correct-index-from-input-array-in-jquery также несколько полезен. К сожалению, я не смог скопировать их метод выбора с вашим конкретным набором атрибутов.

Надеюсь, я не делаю вашу домашнюю работу;) В приведенном выше URL есть пробел, потому что у меня недостаточно очков репутации, чтобы разместить более одной гиперссылки.

Это ваш последний JSON:

  {"title":"abc","persons":[{"name":"person0englishman","color":"pink"},{"name":"person1indian","color":"brown"}]}