Есть ли библиотека javascript (предпочитает jquery), которая автоматически отображает элементы формы в JSON?

Question

Справочная информация: Это то, что я искал еще до того, как даже JSON был известен как JSON.

Предположим, в вашем коде есть следующая переменная javascript:

jsonroot = 
{
    'fname':'valued'
    ,'lname':'customer'
    ,faves:['berry','chocolate','mint']
    ,actors:[
        {'fname':'brad','lname':'pitt'}
        ,{'fname':'mike','lname':'hammer'}
    ]
};

Вы можете легко увидеть, как это отображается в JSON, это соответствие 1: 1.

Вопрос: Существует ли библиотека, которая может принять это соответствие 1: 1 и перенести его в элементы HTML-формы? Например, я хотел бы сделать что-то подобное внутри элемента FORM:

<input type="text" mapping="jsonroot['fname']" id="fname"></input>
<input type="text" mapping="jsonroot['lname']" id="lname"></input>

<legend>
    <fieldset>Favorite Flavors</fieldset>
    <input type="text" mapping="jsonroot['faves'][0]" id="fave_0"></input>
    <input type="text" mapping="jsonroot['faves'][1]" id="fave_1"></input>
    <input type="text" mapping="jsonroot['faves'][2]" id="fave_2"></input>
</legend>

<legend>
    <fieldset>Favorite Actors</fieldset>
    <input type="text" mapping="jsonroot['actors'][0]['fname']" id="fave_0_fname"></input>
    <input type="text" mapping="jsonroot['actors'][0]['lname']" id="fave_0_lname"></input>

    <input type="text" mapping="jsonroot['actors'][1]['fname']" id="fave_1_fname"></input>
    <input type="text" mapping="jsonroot['actors'][1]['lname']" id="fave_1_lname"></input>
</legend>

Обоснование: Иногда вместо отправки переменных формы через POST или GET я хочу передать их в переменную javascript, затем что-то сделать с переменной и затем отправить куда-нибудь.

Написание HTML-формы <-> Перевод JSON утомителен. Я не могу быть единственным человеком, который хотел этого, так есть ли библиотека, которая обрабатывает это автоматически?

Answer 1

Используйте что-то вроде Плагин JSON JQuery Марка Гибсона . Он добавляет $.toJSON() и $.parseJSON() методы. Используйте это в сочетании с кодом, который сериализует форму для объекта, например Сериализация формы в JSON :

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};