我有一个名为'config[display][x]', 'config[display][y]', 'config[port]',...
的表单,或者我可以创建不同的格式。
我想将它序列化为JS对象,如
{config:
display : {x : 'value', y : 'value'},
port : 'value'
}
有人知道现有的解决方案吗?
P.S。我可以使用jQuery的.serializeArray()序列化表单,但我将使用简单的{name:name,value:value}哈希数组。但是如何创建对象?
答案 0 :(得分:3)
参见https://github.com/serbanghita/formToObject - 还与现有解决方案进行了比较。
var myFormObj = formToObject('myFormId');
/*
console.log(myFormObj);
{
saveSettings: 'Save',
name: 'Serban',
race: 'orc',
settings: {
input: 'keyboard',
video: {
resolution: '1024x768',
vsync: 'on'
}
}
}
*/
答案 1 :(得分:2)
我使用Ben Almans .serializeObject()
并且它有效。
http://benalman.com/projects/jquery-misc-plugins/#serializeobject
代码小而简单:
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return obj;
};
答案 2 :(得分:0)
要将JavaScript对象序列化为字符串,请使用:
var str = JSON.stringify(obj);
要将字符串反序列化为JavaScript对象,请使用:
var obj = JSON.parse(str);
如果您使用的是不支持这些方法的旧浏览器,则可以使用Douglas Crockford的JSON2库。
答案 3 :(得分:0)
我相信这就是你所寻求的:
function assignByPath(obj,path,value){
if (path.length == 1) {
obj[path[0]] = value;
return obj;
} else if (obj[path[0]] === undefined) {
obj[path[0]] = {};
}
return assignByPath(obj[path.shift()],path,value);
}
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
path = n.replace('[','.').replace('][','.').replace(']','').split('.');
assignByPath(obj,path,v);
});
return obj;
};
答案 4 :(得分:0)
这就是我使用嵌套表单名称的方式,嵌套表单名称可以有多个层次,具体取决于我必须传输的内容。我只在少数情况下需要此功能,但我想在这里分享。
我遇到的问题是,表单名称以data[SomeName[hello]][world] = "foobar"
的形式提交,这会导致php上的数据结构令人讨厌(例如)
$data = [
"data" => [
"SomeName[hello" => [
"world" => "foobar"
],
],
];
在提交仅用于https://stackoverflow.com/a/48218209/1356107的序列化数据之前,没有检查数据客户端,当表单数据包装到另一个对象中时,出现了这些错误。
通过查看下面的代码段中的代码,我解决了该问题,并能够发送完整的有效数据结构。
getFormData = function($form)
{
var paramObj = {};
/**
* Credit where credit is due. Copied from https://stackoverflow.com/a/48218209/1356107 by jhildenbiddle
*/
var mergeDeep = function(...objects)
{
var isObject = obj => obj && typeof obj === 'object';
return objects.reduce((prev, obj) => {
Object.keys(obj).forEach(key => {
var pVal = prev[key];
var oVal = obj[key];
if (Array.isArray(pVal) && Array.isArray(oVal)) {
prev[key] = pVal.concat(...oVal);
}
else if (isObject(pVal) && isObject(oVal)) {
prev[key] = mergeDeep(pVal, oVal);
}
else {
prev[key] = oVal;
}
});
return prev;
}, {});
}
var phpFormKeyToObject = function(key, value)
{
var lookup = key.indexOf('[');
if(lookup != -1) {
var arrayName = key.substring(0, lookup);
var newObj = {};
newObj[arrayName] = {};
var res = key.matchAll(/\[(.*?)\]/g);
var previous = newObj[arrayName];
var lastkey = arrayName;
var lastobj = newObj;
for(var match of res) {
/**
* Arrays exit early. zero length key, is array, append and exit.
*/
if(match[1].length == 0) {
if(Array.isArray(lastobj[lastkey])) {
lastobj[lastkey].push(value);
return newObj;
}
else {
lastobj[lastkey] = [value];
return newObj;
}
}
else {
previous[match[1]] = {};
lastobj = previous;
previous = previous[match[1]];
lastkey = match[1];
}
}
lastobj[lastkey] = value;
return newObj;
}
return false;
}
/**
* Credit where credit is due, slightly modified version of https://stackoverflow.com/a/2403206/1356107 by Pointy
*/
$.each($form.serializeArray(), function(_, kv) {
if(kv.name.indexOf('[') != -1) {
var obj = phpFormKeyToObject(kv.name, kv.value);
paramObj = mergeDeep(paramObj, obj);
}
else {
if (paramObj.hasOwnProperty(kv.name)) {
paramObj[kv.name] = $.makeArray(paramObj[kv.name]);
paramObj[kv.name].push(kv.value);
}
else {
paramObj[kv.name] = kv.value;
}
}
});
return paramObj;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testform">
<label>check it 1</label><input type="checkbox" value="1" name="SomeName[checkboxvalues][]"><BR/>
<label>check it 2</label><input type="checkbox" value="2" name="SomeName[checkboxvalues][]"><BR/>
<label>check it 3</label><input type="checkbox" value="3" name="SomeName[checkboxvalues][]"><BR/>
<label>test</label><input type="text" value="test" name="SomeName[test]"><BR/>
<label>how much of extra 1</label>
<select name="SomeName[extra_items][320]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/>
<label>how much of extra 2</label>
<select name="SomeName[extra_items][321]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><BR/>
<input type="hidden" name="somehiddenvalue" value="this is hidden">
<input type="button" onclick="console.log(getFormData($('#testform')))" value="test me">