时间戳

首页 > 解决方案 > JavaScript div 同名输入序列化到 json 数组

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

问题描述

我有以下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'}]

数据模型绑定会更好地实现这一点吗？

标签： javascriptjqueryjson

解决方案

根据您输入元素的结构，您可以使用.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>

推荐阅读