Преобразуйте поле HTML-формы в объект JSON с внутренними объектами
Учитывая следующую 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"." входит в систему имя поля.
3 ответа
Я думаю, что вы бы сделали вот что: для каждого ввода сначала разделите имя по разделителям (символам '.'). Теперь у вас есть массив имен.Затем вы можете выполнить итерацию по этому массиву, убедившись, что ваш целевой объект «сборки» (и подобъекты) имеет контейнеры каждый раз, когда вы сталкиваетесь с новым сегментом имени. Когда в массиве 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 () )
Вы можете перемещаться по полям формы по имени, используйте 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». Но это должно помочь вам начать.
Создайте объект этой формы, затем используйте кодировщик JSON , чтобы записать его.