如何基于原始JavaScript中的输入名称创建表单输入值的嵌套对象(JSON)? [英] How to create a nested object (JSON) of a form input values based on the input name in vanilla JavaScript?
本文介绍了如何基于原始JavaScript中的输入名称创建表单输入值的嵌套对象(JSON)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
//让表单如下所示
<form id="myform">
<input name="foo" value="parent"/>
<input name="foo.cat.bar" value="child1"/>
<input name="foo.cat.biz" value="child2"/>
<input name="foo.cat.biz.dog.bar" value="child3"/>
</form>
///我希望基于输入名称attr//的JSON格式输出像这样//(这只是一个示例,需要通用答案和最佳方法)
// I want the output to be like this in JSON format based on the input name attr //(this is just an example, want generic answer and the best way to do it)
{
"foo": "parent",
"foo.cat": {
"bar": "child1",
"biz": "child2",
"foo.cat.biz.dog": {
"bar": "child3"
}
}
}
推荐答案
在这里.我在评论中加入了解释...
Here you go. I've included an explanation in the comments...
function getFormData() {
/* return nested array combined
into groups of two. See question @
https://stackoverflow.com/a/31352555/4746328 */
function groupIntoPairs(arr) {
var temp = arr.slice();
var out = [];
while (temp.length) {
out.push(temp.splice(0,2));
}
return out;
}
/* create a storage object */
var data = {},
/* get 'input' elements as an array */
inputs = [].slice.call(document.getElementById('myform').querySelectorAll('input')),
/* additional variables */
name, hold, splits, L, dKey;
/* loop through input elements */
inputs.forEach(function(n) {
name = n.name;
/* for holding key strings */
hold = '';
/* split the 'name' at '.'
and group into pairs */
splits = groupIntoPairs( name.split('.') );
/* index of last item in 'splits' */
L = splits.length - 1;
/* if 'splits' has only one
item add the name-value pair
to 'data' straight away */
if (L === 0) {
data[name] = n.value;
} else {
/* loop 'splits' to create keys */
splits.forEach(function(x, i) {
/* combine key strings until
last item in 'splits' */
if (i !== L) hold += '.' + x.join('.');
});
/* define the key */
dKey = hold.slice(1);
/* create 'data[dKey]' Object if
it doesn't exist or use it
again if it does */
data[dKey] = data[dKey] || {};
/* add last item in 'splits' as
key for 'data[dKey]' and
assign current n.value */
data[dKey][splits[L][0]] = n.value;
}
});
/* return 'data' object */
return data;
}
console.log('data:', JSON.stringify(getFormData(), null, 4));
/* => data: {
"foo": "parent",
"foo.cat": {
"bar": "child1",
"biz": "child2"
},
"foo.cat.biz.dog": {
"bar": "child3"
}
}
*/
希望有帮助.
这篇关于如何基于原始JavaScript中的输入名称创建表单输入值的嵌套对象(JSON)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文