JavaScript div同名输入序列化到json数组

Question

我有以下html：

<div id="formdata">

<input type='hidden' name='item_name' value='1001-UMBRELLA'/>
<input type='hidden' name='item_name' value='1002-UMBRELLA'/>
<input type='hidden' name='item_name' value='1003-UMBRELLA'/>

<input type='hidden' name='rate' value='20.00'/>
<input type='hidden' name='rate' value='40.00'/>
<input type='hidden' name='rate' value='60.00'/>

<input type='hidden' name='quantity' value='10.00'/>
<input type='hidden' name='quantity' value='20.00'/>    
<input type='hidden' name='quantity' value='30.00'/>

</div>

我想要得到的JSON形式是：

[{'item_name':'1001-UMBRELLA', 'quantity':'10', 'rate':'20'}, 
{'item_name':'1002-UMBRELLA', 'quantity':'20', 'rate':'40'},
{'item_name':'1003-UMBRELLA', 'quantity':'30', 'rate':'60'}]

我已经尝试过.serializeArray（），它以名称值对的形式提供输出，呈现以下输出：

[{'name':'item_name','value':'1001-UMBRELLA'},{'name':'item_name','value':'1002-UMBRELLA'},{'name':'item_name','value':'1003-UMBRELLA'},{'name':'rate','value':'20.00'},{'name':'rate','value':'40.00'},{'name':'rate','value':'60.00'},{'name':'quantity','value':'10.00'},{'name':'quantity','value':'20.00'},{'name':'quantity','value':'30.00'}]

使用数据模型绑定是否可以更好地实现？

Answer 1

根据输入元素的结构，您可以使用.map（）加上.querySelectorAll（）

 var retVal = Array.from(document.querySelectorAll("#formdata input[name='item_name']")).map(function(ele) { var x = {}; x[ele.name] = ele.value; x[ele.nextElementSibling.name] = Number(ele.nextElementSibling.value).toString(); x[ele.nextElementSibling.nextElementSibling.name] = Number(ele.nextElementSibling.nextElementSibling.value).toString(); return x; }); console.log(retVal); 

 <div id="formdata"> <input type='hidden' name='item_name' value='1001-UMBRELLA'/> <input type='hidden' name='quantity' value='10.00'/> <input type='hidden' name='rate' value='20.00'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='quantity' value='20.00'/> <input type='hidden' name='rate' value='40.00'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='quantity' value='30.00'/> <input type='hidden' name='rate' value='60.00'/> </div> 

Answer 2

干得好。 无论输入字段的顺序如何，它都将起作用。

 var serializeGroup = function(formId) { var items = $('input[name]', formId).serializeArray(); // Groups the element array by the `name` attribute var group = items.reduce((seed, item) => { (seed[item.name] = seed[item.name] || []).push(item); return seed; }, {}); // Iterates through the grouped names return Object .keys(group) .map((name, index, all) => // Flattens the list into a key-value pair all.reduce((seed, key) => { var value = group[key][index].value; seed[key] = $.isNumeric(value) ? Math.round(value) : value; return seed; }, {}) ); } let data = serializeGroup('#formdata'); console.log(data); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="formdata"> <input type='hidden' name='item_name' value='1003-UMBRELLA' /> <input type='hidden' name='quantity' value='30.00' /> <input type='hidden' name='item_name' value='1001-UMBRELLA' /> <input type='hidden' name='quantity' value='10.00' /> <input type='hidden' name='rate' value='60.00' /> <input type='hidden' name='item_name' value='1002-UMBRELLA' /> <input type='hidden' name='rate' value='20.00' /> <input type='hidden' name='rate' value='40.00' /> <input type='hidden' name='quantity' value='20.00' /> </div> 

Answer 3

这是一个与您的输出匹配的递归原始JS示例。 它不假定输入顺序正确，分组可以是任意数字，并且可以正确格式化数量和费率。

 // Create an array from the inputs const inputs = Array.from(document.querySelectorAll('#formdata input')); function serialiseInputs(tail, grouping, out) { // Set the output array to a new array if it doesn't exist out = out || []; // If the length of the tail array (remaining inputs) is 0 // return the output array if (!tail.length) return out; // Grab the number of inputs that satisfies the grouping number const head = tail.splice(0, grouping); // `reduce` over the head creating the new object, and add it to the // output array out.push(head.reduce((acc, { name, value}) => { if (['rate', 'quantity'].includes(name)) value = (+value).toString(); acc[name] = value; return acc; }, {})); // Call the function again with the remaining inputs return serialiseInputs(tail, grouping, out); } // Call the function with the inputs, and the grouping number console.log(serialiseInputs(inputs, 4)); 

 <div id="formdata"> <input type='hidden' name='temp' value='temp1'/> <input type='hidden' name='quantity' value='10.00'/> <input type='hidden' name='rate' value='20.00'/> <input type='hidden' name='item_name' value='1001-UMBRELLA'/> <input type='hidden' name='quantity' value='20.00'/> <input type='hidden' name='temp' value='temp2'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='rate' value='40.00'/> <input type='hidden' name='rate' value='60.00'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='quantity' value='30.00'/> <input type='hidden' name='temp' value='temp3'/> </div> 

Answer 4

 function GetArray() { var arry = []; var item = {}; var fisrtProeprty; $.each($("input[type=hidden]"), function (index, value) { var name = $(value).attr("name"); var value = $(value).attr("value"); if (index === 0) { fisrtProeprty = name; } if (fisrtProeprty == name && index > 0) { arry.push(item); item = {}; } if (!item[name]) { item[name] = value; } }); arry.push(item); return arry; } var myArray = GetArray(); console.log(myArray); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="formdata"> <input type='hidden' name='item_name' value='1001-UMBRELLA'/> <input type='hidden' name='quantity' value='10.00'/> <input type='hidden' name='rate' value='20.00'/> <input type='hidden' name='fatih' value='100'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='quantity' value='20.00'/> <input type='hidden' name='rate' value='40.00'/> <input type='hidden' name='fatih' value='258'/> <input type='hidden' name='item_name' value='1002-UMBRELLA'/> <input type='hidden' name='quantity' value='30.00'/> <input type='hidden' name='rate' value='60.00'/> <input type='hidden' name='fatih' value='145'/> </div>