如何创建、收集和以编程方式(每个表单元素一个条目)聚合相关表单元素中的对象

Question

我想按父<div>子级的数据对象进行分组

这是我的代码：

<form id="myForm">
<div id="parent-div">
<div>
<input type="text" style="margin: 0;" name="t-name-1" value="value1" />
<span>
<input type="text" name="t-quantity-1" value="1" />
<input type="text" name="t-frequency-1" value="6" />
</span>
</div>
<div>
<input type="text" style="margin: 0;" name="t-name-2" value="value2" />
<span>
<input type="text" name="t-quantity-2" value="2" />
<input type="text" name="t-frequency-2" value="8" />
</span>
</div>
</div>
<button type="submit">
Submit
</button>
</form>

var group = [];
$('#myForm').on('submit', function(e){
e.preventDefault();
var elements = document.getElementById("myForm").elements;

for(var i = 0 ; i < elements.length - 1 ; i++){
var item = elements.item(i);
//console.log(i, item.name, '-', item.value);

if(item.name.includes(item.name.split("-")[2])){
var obj = {};
var name = item.name.split("-")[1];
obj[ name ] = item.value
group.push(obj);
}
}

console.log(group);
});

我得到的输出是：

[{
name: "value1"
}, {
quantity: "1"
}, {
frequency: "6"
}, {
name: "value2"
}, {
quantity: "2"
}, {
frequency: "8"
}]

所需输出：

var group = [
{
"name": "value1",
"quantity": "1",
"frequency": "6"
},
{
"name": "value2",
"quantity": "2",
"frequency": "8"
}
]

这是一个正在工作的jsFiddle：https://jsfiddle.net/7yxzpsd5/45/

Answer 1

最灵活的方法不对表单的内部DOM层次结构进行任何假设。相反，它将关注所有表单元素的name属性都有共同点的命名模式，即。。。"t-<key>-<id>"。

因此，一个完全不可知DOM结构但部分可重复使用的方法将是二分/二折叠的。

• 第一部分介绍了正则表达式，在该正则表达式上可以识别任何表单元素。此正则表达式如下。。。/^t-(?<key>w+)-(?<id>d+)$/。它具有用于捕获name值的key和id部分的命名组。实际任务。。。

  • 将表单元素集合转换为数组

  • filter是所有有效的(根据正则表达式(表单元素。

  • reduce将过滤后的数组放入dataItems列表中

  • reducer函数作为配置对象的一部分提供regex，该配置对象也作为初始值传递给reduce。

• 第二个任务被实现为通用和可重复使用的函数，该函数在表单元素的提取的id以及该元素的提取key和它的value上创建和存储dataItem对象。

function collectDataItemsByElementKeyAndId(collector, elmNode) {
const { regX, list, map } = collector;
const { key, id } = regX.exec(elmNode.name)?.groups ?? {};
let dataItem = map[id];
if (!dataItem) {
dataItem = map[id] = {};
list.push(dataItem);
}
Object.assign(dataItem, { [key]: elmNode.value });

return collector;
}
function handleSubmit(evt) {
evt.preventDefault();
const regXKeyAndId = /^t-(?<key>w+)-(?<id>d+)$/;
const dataItemList = Array
.from(this.elements) // `this` refers to the form element.
.filter(elm => regXKeyAndId.test(elm.name))
.reduce(collectDataItemsByElementKeyAndId, {
regX: regXKeyAndId,
map: {},
list: [],
}).list;
console.log({ dataItemList });
}
$('#myForm').on('submit', handleSubmit);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div id="parent-div">
<div>
<input type="text" style="margin: 0;" name="t-name-1" value="value1" />
<span>
<input type="text" name="t-quantity-1" value="1" />
<input type="text" name="t-frequency-1" value="6" />
</span>
</div>
<div>
<input type="text" style="margin: 0;" name="t-name-2" value="value2" />
<span>
<input type="text" name="t-quantity-2" value="2" />
<input type="text" name="t-frequency-2" value="8" />
</span>
</div>
</div>
<button type="submit">
Submit
</button>
</form>

Answer 2

$('#myForm').on('submit', function(e) {
e.preventDefault();
var divs = document.querySelectorAll('#myForm > #parent-div > div')
var group = []
divs.forEach(div => {
var inputs = div.querySelectorAll('input')
var obj = {}
inputs.forEach(i => {
var name = i.getAttribute('name').split('-')[1]
obj[name] = i.value
})
group.push(obj)
})
console.log(group)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div id="parent-div">
<div>
<input type="text" style="margin: 0;" name="t-name-1" value="value1" />
<span>
<input type="text" name="t-quantity-1" value="1" />
<input type="text" name="t-frequency-1" value="6" />
</span>
</div>
<div>
<input type="text" style="margin: 0;" name="t-name-2" value="value2" />
<span>
<input type="text" name="t-quantity-2" value="2" />
<input type="text" name="t-frequency-2" value="8" />
</span>
</div>
</div>
<button type="submit">
Submit
</button>
</form>