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'}]

通过数据模型绑定(bind)可以更好地实现这一点吗？

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>