Javascript从动态输入表单向数组中添加对象

Question

我正在读取输入表单并获得id为tle_breakup_0,rtl_breakup_0,tle_breakup_1,rtl_breakup_1,tle_breakup_2,rtl_breakup_2。

$('#myForm').submit(function () {
var $inputs = $('#myForm :input');
$inputs.each(function () {
var attr_name = this.id;
var attr_value = $(this).val();
});
});

我怎样才能得到以下是我想收集分手索引id的预期输出。

{
"breakup": [{
"tle_breakup_0": "12",
"rtl_breakup_0": "12"
},
{
"tle_breakup_1": "12",
"rtl_breakup_1": "12"
},
{
"tle_breakup_2": "12",
"rtl_breakup_2": ""
}
]
}

Answer 1

这实际上只是每个id的最后一位数字上的'group by'。因为你正在使用jquery，你可以只使用each组到一个对象外声明它。这里使用String#match()提取最后一位数字，然后使用逻辑空赋值(?? ?=)初始化不存在的对象，并使用括号表示法设置属性。最后将分组对象的Object.values()分配给result.breakup。

const result = { breakup: [] };
$('#myForm').submit(function (e) {
e.preventDefault();

const grouped ={}
$('#myForm input').each(function () {
const attr_name = this.id;
const attr_value = $(this).val();
const key = attr_name.match(/d+$/)?.[0];
if (key!==undefined){
(grouped[key] ??= {})[attr_name] = attr_value;
}
});

result.breakup=Object.values(grouped);

console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input id="tle_breakup_0" type="text" value="10"/>
<input id="rtl_breakup_0" type="text" value="10"/>
<input id="tle_breakup_1" type="text" value="11"/>
<input id="rtl_breakup_1" type="text" value="11"/>
<input id="tle_breakup_2" type="text" value="12"/>
<input id="rtl_breakup_2" type="text" />
<button>Submit</button>
</form>

或者，如果您正在寻找基于id的其他部分的更动态的分配，您可以简单地解析出这些并根据需要使用它们。

const result = {};
$('#myForm').submit(function (e) {
e.preventDefault();
const grouped = {}
$('#myForm input').each(function () {
const attr_name = this.id;
const attr_value = $(this).val();
const [, group, key] = attr_name.split('_');
if (group !== undefined && key !== undefined) {
grouped[group] ??= {};
grouped[group][key] ??= {};
grouped[group][key][attr_name] = attr_value;
}
});
const groupedResult = Object.fromEntries(
Object.entries(grouped).map(([k, v]) => [k, Object.values(v)]));
Object.assign(result, groupedResult);
console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input id="tle_breakup_0" type="text" value="10"/>
<input id="rtl_breakup_0" type="text" value="10"/>
<input id="tle_breakup_1" type="text" value="11"/>
<input id="rtl_breakup_1" type="text" value="11"/>
<input id="tle_other_2" type="text" value="12"/>
<input id="rtl_other_2" type="text" />
<button>Submit</button>
</form>