Преобразование поля формы HTML в объект JSON с внутренними объектами - PullRequest
Новая
       10

Преобразование поля формы HTML в объект JSON с внутренними объектами

5 голосов
/ 31 марта 2010

Учитывая следующую HTML-форму: 

<form id="myform">
  Company: <input type="text" name="Company" value="ACME, INC."/>
  First Name: <input type="text" name="Contact.FirstName" value="Daffy"/>
  Last Name: <input type="text" name="Contact.LastName" value="Duck"/>
</form>

Как лучше всего сериализовать эту форму в javascript в объект JSON в формате: 

{
  Company:"ACME, INC.",
  Contact:{FirstName:"Daffy", LastName:"Duck"}
}

Также обратите внимание, что может быть больше 1 "." войдите в поле имени.

Ответы [ 5 ]

12 голосов
/ 31 марта 2010

Я думаю, что вы должны сделать следующее: для каждого ввода сначала разделите имя в разделителях (символы «.»). Теперь у вас есть массив имен. Затем вы можете выполнить итерацию по этому массиву, убедившись, что у вашего целевого объекта «сборки» (и подобъектов) есть контейнеры каждый раз, когда вы сталкиваетесь с новым сегментом имени. Когда массив содержит 1 элемент, вы просто добавляете значение. 

$.fn.extractObject = function() {
  var accum = {};
  function add(accum, namev, value) {
    if (namev.length == 1)
      accum[namev[0]] = value;
    else {
      if (accum[namev[0]] == null)
        accum[namev[0]] = {};
      add(accum[namev[0]], namev.slice(1), value);
    }
  }; 
  this.find('input, textarea, select').each(function() {
    add(accum, $(this).attr('name').split('.'), $(this).val());
  });
  return accum;
});
// ...

var object = $('#myform').extractObject();

Я только что сделал это, так что может быть одна или две ошибки; Я не могу вспомнить, есть ли во всех браузерах «слайс», но я думаю, что они есть.

(редактировать: я забыл самый важный звонок split())

2 голосов
/ 31 марта 2010

Вы можете циклически проходить по полям формы по имени, использовать String#split, чтобы разделить имена по точкам, и построить полученную структуру. Код концепции: 

function serializeDeep(form) {
    var rv, obj, elements, element, index, names, nameIndex, value;

    rv = {};
    elements = form.elements;
    for (index = 0; index < elements.length; ++index) {
        element = elements[index];
        name = element.name;
        if (name) {
            value = $(element).val();
            names = name.split(".");
            obj = rv;
            for (nameIndex = 0; nameIndex < names.length; ++nameIndex) {
                name = names[nameIndex];
                if (nameIndex == names.length - 1) {
                    obj[name] = value;
                }
                else {
                    obj = obj[name] = obj[name] || {};
                }
            }
        }
    }
    return rv;
}

Обратите внимание, что это не допускает полей с повторяющимися именами (которые должны создавать массивы), и при этом не элегантно обрабатывает ситуацию, когда вы используете имена "foo" и "foo.bar". Но это должно помочь вам начать.

1 голос
/ 28 сентября 2017

Я создал пример для этого вопроса, используя обычный js, пожалуйста, проверьте консоль инструментов разработчика, чтобы увидеть объект данных!

Пример jsfiddle 

var data = {};
var array = 'person.name.first'.split('.');
var value = 'myFirstName';
generateObj(data, array, value);
console.log(data);

function generateObj(obj, arr, val) {
    if (arr.length === 1) {
        obj[arr[0]] = val
        return;
    } 

    var restArr = arr.splice(1);
    if (!obj[arr[0]]) {
        obj[arr[0]] = {};
    }
    generateObj(obj[arr[0]], restArr, val);
}

решение:

  1. преобразовать каждую строку имени в массив.
  2. итерация по каждому массиву.
  3. рекурсивно вызывает метод, который создает объект, устанавливает этот объект в качестве значения свойства и передает этот объект следующей рекурсии.
1 голос
/ 09 ноября 2011

Мне удалось это так: 

$('#Myform').attr('onsubmit', 'test()');

function test() {

  var obj = {};

  obj.title =$('#title').prop('value');
  console.log('title: '+obj.title);

  obj.website =$('#website').prop('value');
  console.log('website: '+obj.website);

  obj.tags =$('#tags').prop('value').split(',');
  console.log('tags: '+obj.tags);

  do_something(JSON.stringify(obj));

}

Конечно, это можно сделать, если вы знаете, как называются имена, и я на самом деле создаю саму таблицу с помощью подключаемого модуля Formation.

0 голосов
/ 31 марта 2010

Создайте объект этой формы, затем используйте кодировщик JSON для его записи.

...