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>

​