Преобразование данных формы в объект JavaScript с помощью jQuery
Как мне преобразовать все элементы моей формы в объект JavaScript?
Я хотел бы иметь какой-то способ автоматического создания объекта JavaScript из моей формы, без необходимости циклически перебирать каждый элемент. Я не хочу строку, как возвращено $('#formid').serialize();и я не хочу, чтобы карта возвращалась $('#formid').serializeArray();
67 ответов
serializeArray уже делает именно это. Вам просто нужно втиснуть данные в нужный вам формат:
function objectifyForm(formArray) {//serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
Остерегайтесь скрытых полей, имена которых совпадают с реальными входными данными, поскольку они будут перезаписаны.
Конвертировать формы в JSON LIKE A BOSS
Текущий источник на GitHub и Bower.
$ bower install jquery-serialize-object
Следующий код устарел.
Следующий код может работать со всеми видами входных имен; и обращаться с ними так, как вы ожидаете.
Например:
<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
"honey":{
"badger":"a"
},
"wombat":["b"],
"hello":{
"panda":["c"]
},
"animals":[
{
"name":"d",
"breed":"e"
}
],
"crazy":[
null,
[
{"wonky":"f"}
]
],
"dream":{
"as":{
"vividly":{
"as":{
"you":{
"can":"g"
}
}
}
}
}
}
использование
$('#my-form').serializeObject();
Колдовство (JavaScript)
(function($){
$.fn.serializeObject = function(){
var self = this,
json = {},
push_counters = {},
patterns = {
"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
"key": /[a-zA-Z0-9_]+|(?=\[\])/g,
"push": /^$/,
"fixed": /^\d+$/,
"named": /^[a-zA-Z0-9_]+$/
};
this.build = function(base, key, value){
base[key] = value;
return base;
};
this.push_counter = function(key){
if(push_counters[key] === undefined){
push_counters[key] = 0;
}
return push_counters[key]++;
};
$.each($(this).serializeArray(), function(){
// skip invalid keys
if(!patterns.validate.test(this.name)){
return;
}
var k,
keys = this.name.match(patterns.key),
merge = this.value,
reverse_key = this.name;
while((k = keys.pop()) !== undefined){
// adjust reverse_key
reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
// push
if(k.match(patterns.push)){
merge = self.build([], self.push_counter(reverse_key), merge);
}
// fixed
else if(k.match(patterns.fixed)){
merge = self.build([], k, merge);
}
// named
else if(k.match(patterns.named)){
merge = self.build({}, k, merge);
}
}
json = $.extend(true, json, merge);
});
return json;
};
})(jQuery);
Что случилось с:
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
Исправленная версия решения Тобиаса Коэна. Этот правильно обрабатывает ложные значения, такие как 0 а также '',
jQuery.fn.serializeObject = function() {
var arrayData, objectData;
arrayData = this.serializeArray();
objectData = {};
$.each(arrayData, function() {
var value;
if (this.value != null) {
value = this.value;
} else {
value = '';
}
if (objectData[this.name] != null) {
if (!objectData[this.name].push) {
objectData[this.name] = [objectData[this.name]];
}
objectData[this.name].push(value);
} else {
objectData[this.name] = value;
}
});
return objectData;
};
И версия CoffeeScript для вашего удобства кодирования:
jQuery.fn.serializeObject = ->
arrayData = @serializeArray()
objectData = {}
$.each arrayData, ->
if @value?
value = @value
else
value = ''
if objectData[@name]?
unless objectData[@name].push
objectData[@name] = [objectData[@name]]
objectData[@name].push value
else
objectData[@name] = value
return objectData
Мне нравится использовать Array.prototype.reduce потому что это однострочный, и он не зависит от Underscore.js или тому подобного:
$('#formid').serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
Это похоже на ответ, используя Array.prototype.map, но вам не нужно загромождать вашу область видимости дополнительной переменной объекта. Шоппинг с одной остановкой.
ВАЖНОЕ ПРИМЕЧАНИЕ: формы с входами, которые имеют дубликаты name Атрибуты являются допустимым HTML, и на самом деле это общий подход. Использование любого из ответов в этой теме будет неуместным в этом случае (поскольку ключи объектов должны быть уникальными).
[ОБНОВЛЕНИЕ 2020]
С помощью простого oneliner в vanilla js, который использует fromEntries (как всегда, проверьте поддержку браузера):
Object.fromEntries(new FormData(form))
Все эти ответы показались мне такими чрезмерными. Есть что-то, что нужно сказать для простоты. Пока все входные данные формы имеют установленный атрибут name, это должно работать только Джим Денди.
$('form.myform').submit(function () { var $this = $(this) , viewArr = $this.serializeArray() , view = {}; for (var i in viewArr) { view[viewArr[i].name] = viewArr[i].value; } //Do stuff with view object here (e.g. JSON.stringify?) });
При всех данных ответах возникла проблема, которая...
Если ввести имя как массив, как name[key], но это будет генерировать так
name:{
key : value
}
Например: если у меня есть такая форма.
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
</form>
Тогда он будет генерировать объект, как это со всем данным ответом.
Object {
name : 'value',
name1[key1] : 'value1',
name2[key2] : 'value2',
name3[key3] : 'value3',
}
Но это должно генерироваться, как показано ниже, любой хочет получить как это, как показано ниже.
Object {
name : 'value',
name1 : {
key1 : 'value1'
},
name2 : {
key2 : 'value2'
},
name3 : {
key2 : 'value2'
}
}
Тогда попробуйте это ниже JS кода.
(function($){
$.fn.getForm2obj = function(){
var _ = {},_t=this;
this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
$.map(this.serializeArray(),function(n){
if(n.name.indexOf('[') > -1 ){
var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
$.map(keys,function(key,i){
if(key == ''){
eval("ale = Object.keys("+tmp+").length;");
if(!ale) _t.b(tmp,'[]');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
else _t.b(tmp += "["+ale+"]",'{}');
}else{
_t.c(tmp += "['"+key+"']",'{}');
if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
}
});
}else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
});
return _;
}
})(jQuery);
console.log($('form').getForm2obj());<!DOCTYPE html><html><head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
<input type="checkbox" name="name4[]" value="1" checked="checked">
<input type="checkbox" name="name4[]" value="2">
<input type="checkbox" name="name4[]" value="3">
</form>
</body></html>Если вы используете Underscore.js, вы можете использовать относительно лаконично:
_.object(_.map($('#myform').serializeArray(), _.values))
Там действительно нет способа сделать это без изучения каждого из элементов. Что вы действительно хотите знать, так это "кто-то другой уже написал метод, который преобразует форму в объект JSON?" Должно работать что-то вроде следующего - обратите внимание, что оно даст вам только те элементы формы, которые будут возвращены через POST (должно иметь имя). Это не проверено.
function formToJSON( selector )
{
var form = {};
$(selector).find(':input[name]:enabled').each( function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
Хорошо, я знаю, что на этот вопрос уже получен очень высокий голос, но недавно был задан еще один похожий вопрос, и меня тоже направили на этот вопрос. Я также хотел бы предложить свое решение, потому что оно предлагает преимущество перед принятым решением: вы можете включить отключенные элементы формы (что иногда важно, в зависимости от того, как функционирует ваш пользовательский интерфейс)
Вот мой ответ на другой вопрос:
Первоначально мы использовали jQuery serializeArray() метод, но это не включает элементы формы, которые отключены. Мы часто отключаем элементы формы, которые "синхронизируются" с другими источниками на странице, но нам все же нужно включить данные в наш сериализованный объект. Так serializeArray() снаружи. Мы использовали :input селектор, чтобы получить все входные элементы (как включенные, так и отключенные) в данном контейнере, а затем $.map() создать наш объект.
var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
var o = {};
o[n.name] = $(n).val();
return o;
});
console.log(obj);
Обратите внимание, что для того, чтобы это работало, каждому из ваших входов потребуется name атрибут, который будет именем свойства результирующего объекта.
Это на самом деле немного изменилось по сравнению с тем, что мы использовали. Нам нужно было создать объект, который был структурирован как.NET IDictionary, поэтому мы использовали это: (Я предоставляю его здесь на случай, если это будет полезно)
var obj = $.map(inputs, function(n, i)
{
return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
Мне нравятся оба этих решения, потому что они простое использование $.map() функции, и у вас есть полный контроль над вашим селектором (так, какие элементы вы в конечном итоге в том числе в ваш результирующий объект). Кроме того, не требуется дополнительный плагин. Обычный старый jQuery.
Эта функция должна обрабатывать многомерные массивы вместе с несколькими элементами с одинаковыми именами.
Я использую его уже пару лет:
jQuery.fn.serializeJSON=function() {
var json = {};
jQuery.map(jQuery(this).serializeArray(), function(n, i) {
var _ = n.name.indexOf('[');
if (_ > -1) {
var o = json;
_name = n.name.replace(/\]/gi, '').split('[');
for (var i=0, len=_name.length; i<len; i++) {
if (i == len-1) {
if (o[_name[i]]) {
if (typeof o[_name[i]] == 'string') {
o[_name[i]] = [o[_name[i]]];
}
o[_name[i]].push(n.value);
}
else o[_name[i]] = n.value || '';
}
else o = o[_name[i]] = o[_name[i]] || {};
}
}
else {
if (json[n.name] !== undefined) {
if (!json[n.name].push) {
json[n.name] = [json[n.name]];
}
json[n.name].push(n.value || '');
}
else json[n.name] = n.value || '';
}
});
return json;
};
Вы можете сделать это:
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
Смотрите JSON.
Одна строка (без зависимостей, кроме jQuery), использует фиксированную привязку объекта для функции, переданной в map метод.
$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]
Что оно делает?
"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }
подходит для прогрессивных веб-приложений (можно легко поддерживать как обычные действия отправки формы, так и запросы ajax)
Использование:
function form_to_json (selector) {
var ary = $(selector).serializeArray();
var obj = {};
for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
return obj;
}
Выход:
{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}
Простота лучше здесь. Я использовал простую строку заменить регулярным выражением, и до сих пор они работали как шарм. Я не эксперт по регулярным выражениям, но держу пари, что вы можете даже заполнять очень сложные объекты.
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
Из более старого ответа:
$('form input,select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
Используя решение Мачека, я изменил его, чтобы он работал так, как ASP.NET MVC обрабатывает свои вложенные / сложные объекты в одной форме. Все, что вам нужно сделать, это изменить часть проверки на это:
"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,
Это будет соответствовать, а затем правильно сопоставлять элементы с именами, такими как:
<input type="text" name="zooName" />
А также
<input type="text" name="zooAnimals[0].name" />
Я обнаружил проблему с кодом Тобиаса Коэна (у меня недостаточно очков, чтобы прокомментировать его напрямую), который в противном случае работает для меня. Если у вас есть две опции выбора с одинаковым именем, оба со значением ="", исходный код выдаст "name":"" вместо "name":["",""]
Я думаю, это можно исправить, добавив " || o[this.name] == ''" в первое условие if:
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] || 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;
};
const formData = new FormData(form);
let formDataJSON = {};
for (const [key, value] of formData.entries()) {
formDataJSON[key] = value;
}
Самый простой и точный способ, который я нашел для этой проблемы, заключался в том, чтобы использовать плагин BBQ или этот (размером около 0,5 Кбайт).
это также работает с многомерными массивами.
$.fn.serializeObject = function()
{
return $.deparam(this.serialize());
};Другой ответ
document.addEventListener("DOMContentLoaded", function() {
setInterval(function() {
var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
console.log(json)
document.querySelector('#asJSON').value = JSON.stringify(json);
}, 1000);
})<form name="userprofile" id="form">
<p>Name <input type="text" name="firstname" value="John"/></p>
<p>Family name <input name="lastname" value="Smith"/></p>
<p>Work <input name="employment[name]" value="inc, Inc."/></p>
<p>Works since <input name="employment[since]" value="2017" /></p>
<p>Photo <input type="file" /></p>
<p>Send <input type="submit" /></p>
</form>
JSON: <textarea id="asJSON"></textarea>FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData
Для этого есть плагин для jQuery, jquery.serializeJSON. Я успешно использовал его в нескольких проектах. Отлично работает.
Если вы пытаетесь преобразовать все поля формы в JSON, чтобы отправить эту форму через Ajax, вот плагин формы jQuery, который делает это.
Я предпочитаю такой подход, потому что: вам не нужно перебирать более 2 коллекций, вы можете получить вещи, отличные от "name" и "value", если вам нужно, и вы можете санировать свои значения перед сохранением их в объекте (если у вас есть значения по умолчанию, которые вы не хотите хранить, например).
$.formObject = function($o) {
var o = {},
real_value = function($field) {
var val = $field.val() || "";
// additional cleaning here, if needed
return val;
};
if (typeof o != "object") {
$o = $(o);
}
$(":input[name]", $o).each(function(i, field) {
var $field = $(field),
name = $field.attr("name"),
value = real_value($field);
if (o[name]) {
if (!$.isArray(o[name])) {
o[name] = [o[name]];
}
o[name].push(value);
}
else {
o[name] = value;
}
});
return o;
}
Используйте вот так:
var obj = $.formObject($("#someForm"));
Только проверено в Firefox.
Превратите что-нибудь в объект (не проверенный на предмет юнитов)
<script type="text/javascript">
string = {};
string.repeat = function(string, count)
{
return new Array(count+1).join(string);
}
string.count = function(string)
{
var count = 0;
for (var i=1; i<arguments.length; i++)
{
var results = string.match(new RegExp(arguments[i], 'g'));
count += results ? results.length : 0;
}
return count;
}
array = {};
array.merge = function(arr1, arr2)
{
for (var i in arr2)
{
if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
arr1[i] = array.merge(arr1[i], arr2[i]);
else
arr1[i] = arr2[i]
}
return arr1;
}
array.print = function(obj)
{
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? array.print(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
}
node = {};
node.objectify = function(node, params)
{
if (!params)
params = {};
if (!params.selector)
params.selector = "*";
if (!params.key)
params.key = "name";
if (!params.value)
params.value = "value";
var o = {};
var indexes = {};
$(node).find(params.selector+"["+params.key+"]").each(function()
{
var name = $(this).attr(params.key),
value = $(this).attr(params.value);
var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
{
return '"'+arguments[1]+'"';
}).replace(/\[(.*?)\]/gi, function()
{
if (arguments[1].length == 0)
{
var index = arguments[3].substring(0, arguments[2]);
indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;
return ':{"'+indexes[index]+'"';
}
else
return ':{"'+escape(arguments[1])+'"';
})+':"'+value.replace(/[\\"]/gi, function()
{
return "\\"+arguments[0];
})+'"'+string.repeat('}', string.count(name, ']'))+"}");
o = array.merge(o, obj);
});
return o;
}
</script>
Выход теста:
$(document).ready(function()
{
console.log(array.print(node.objectify($("form"), {})));
console.log(array.print(node.objectify($("form"), {selector: "select"})));
});
на
<form>
<input name='input[a]' type='text' value='text'/>
<select name='input[b]'>
<option>select</option>
</select>
<input name='otherinput[c][a]' value='a'/>
<input name='otherinput[c][]' value='b'/>
<input name='otherinput[d][b]' value='c'/>
<input name='otherinput[c][]' value='d'/>
<input type='hidden' name='anotherinput' value='hidden'/>
<input type='hidden' name='anotherinput' value='1'/>
<input type='submit' value='submit'/>
</form>
даст:
{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }
Я сам закодировал форму в многомерный объект JavaScript, чтобы использовать ее в производстве. Результат https://github.com/serbanghita/formToObject.js.
В последнее время у меня возникла та же проблема, и я выпустил этот плагин.toJSON jQuery, который преобразует форму в объект JSON с такой же структурой. Это также особенно полезно для динамически генерируемых форм, где вы хотите, чтобы ваш пользователь мог добавлять больше полей в определенных местах.
Дело в том, что вы, возможно, захотите построить форму так, чтобы у нее была сама структура, поэтому предположим, что вы хотите создать форму, в которую пользователь вставляет свои любимые места в городе: вы можете представить, что эта форма представляет <places>...</places> Элемент XML, содержащий список мест, которые нравятся пользователю, таким образом, список <place>...</place> элементы каждый из которых содержит, например, <name>...</name> элемент, а <type>...</type> элемент, а затем список <activity>...</activity> элементы для представления действий, которые вы можете выполнять в таком месте. Итак, ваша структура XML будет выглядеть так:
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
Как здорово было бы иметь объект JSON из этого, который представлял бы эту точную структуру, чтобы вы могли либо:
- Сохраните этот объект как есть в любой CouchDB- подобной базе данных
- Прочитайте его со стороны вашего сервера $_POST[] и извлеките правильно вложенный массив, который вы можете затем семантически манипулировать
- Используйте некоторый серверный скрипт, чтобы преобразовать его в правильно сформированный XML-файл (даже если вы не знаете его точную структуру априори)
- Просто используйте его как в любом серверном скрипте, похожем на Node.js.
Хорошо, теперь нам нужно подумать, как форма может представлять файл XML.
Конечно <form> тег является root, но тогда у нас есть это <place> элемент, который является контейнером, а не сам элемент данных, поэтому мы не можем использовать входной тег для него.
Вот где <fieldset> бирка пригодится! Мы будем использовать <fieldset> теги для представления всех элементов контейнера в нашем представлении формы /XML и, следовательно, получения результата, подобного этому:
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
Как вы можете видеть в этой форме, мы нарушаем правило уникальных имен, но это нормально, потому что они будут преобразованы в массив элементов, поэтому на них будет ссылаться только их индекс внутри массива.
На данный момент вы можете увидеть, как нет name="array[]" как имя внутри формы, и все красиво, просто и семантически.
Теперь мы хотим, чтобы эта форма была преобразована в объект JSON, который будет выглядеть следующим образом:
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
Для этого я разработал этот плагин jQuery, который кто-то помог оптимизировать в этой ветке Code Review, и выглядит так:
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
Я также сделал это одно сообщение в блоге, чтобы объяснить это больше.
Это преобразует все в форме в JSON (даже радио и флажки), и все, что вам нужно сделать, это позвонить
$.post('script.php',('form').toJSO(), ...);
Я знаю, что есть много способов конвертировать формы в объекты JSON и, конечно же, .serialize() а также .serializeArray() отлично работают в большинстве случаев и в основном предназначены для использования, но я думаю, что вся эта идея написания формы в виде структуры XML со значимыми именами и преобразования ее в правильно сформированный объект JSON стоит того, что вы тоже можете Добавление тегов ввода с одинаковыми именами, не беспокоясь, очень полезно, если вам нужно получить динамически сгенерированные данные форм.
Я надеюсь, что это помогает кому-то!
Вот однострочный вариант с использованием reduce. Reduce - это функциональная функция, которая принимает возвращаемое значение переданной функции и передает его обратно в переданную функцию на следующей итерации вместе с n-м значением из списка.
$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))
Чтобы это сработало, нужно использовать несколько приемов:
...o(синтаксис распространения) вставляет всеkey: valueпары изo- Оберните объект, который мы возвращаем, в
()отличить его от{}которые обозначают функцию - Заверните ключ (
p.name) в[]
Сериализация глубоких вложенных форм без JQuery
Потратив пару дней на поиски решения этой проблемы, не имеющей зависимостей, я решил создать сериализатор данных формы, отличный от jQuery, используя API FormData.
Логика сериализатора в значительной степени основана на функции de-param из плагина jQuery под названием jQuery BBQ, однако в этом проекте все зависимости были удалены.
Этот проект можно найти на NPM и Github:
https://github.com/GistApps/deep-serialize-form
https://www.npmjs.com/package/deep-serialize-form
function deepSerializeForm(form) {
var obj = {};
var formData = new FormData(form);
var coerce_types = { 'true': !0, 'false': !1, 'null': null };
/**
* Get the input value from the formData by key
* @return {mixed}
*/
var getValue = function(formData, key) {
var val = formData.get(key);
val = val && !isNaN(val) ? +val // number
: val === 'undefined' ? undefined // undefined
: coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
: val; // string
return val;
}
for (var key of formData.keys()) {
var val = getValue(formData, key);
var cur = obj;
var i = 0;
var keys = key.split('][');
var keys_last = keys.length - 1;
if (/\[/.test(keys[0]) && /\]$/.test(keys[keys_last])) {
keys[keys_last] = keys[keys_last].replace(/\]$/, '');
keys = keys.shift().split('[').concat(keys);
keys_last = keys.length - 1;
} else {
keys_last = 0;
}
if ( keys_last ) {
for (; i <= keys_last; i++) {
key = keys[i] === '' ? cur.length : keys[i];
cur = cur[key] = i < keys_last
? cur[key] || (keys[i+1] && isNaN(keys[i+1]) ? {} : [])
: val;
}
} else {
if (Array.isArray(obj[key])) {
obj[key].push( val );
} else if (obj[key] !== undefined) {
obj[key] = [obj[key], val];
} else {
obj[key] = val;
}
}
}
return obj;
}
window.deepSerializeForm = deepSerializeForm;