如何在Javascript中将表单数组转换为JSON？ （对象数组）？

Question

HTML：

<form id="products">
<tbody id="product-list">
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test1">test1</td>
    <td><input type="hidden" name="color[]" value="red">red</td><td>
    <input type="hidden" name="size[]" value="S">S</td>
  </tr>
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test2">test2</td>
    <td><input type="hidden" name="color[]" value="blue">blue</td>
    <td><input type="hidden" name="size[]" value="S">S</td>
  </tr>
</tbody>
</form>

JS：

JSON.stringify($("#products").serializeArray();

输出：

[{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}]

所需输出：

对象数组，像这样（只是视觉上的）

Object[0].type -> "jackets"
Object[0].name -> "test1"
Object[0].color -> "red"
Object[0].size -> "S"
Object[1].type -> "jackets"
Object[1].name -> "test2"
Object[1].color -> "blue"
Object[1].size -> "S"

理想情况下，我正在寻找解决方案以及如何进行学习的逻辑。

Answer 1

您可以使用Array.prototype.map()在与要查找的值相对应的每个对象中添加一个键：

var arr = [{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}];

var result = arr.map(function(elem){
  elem[elem.name.replace(/\W/g, '')] = elem.value; //adds key "type" with value "jackets"
  return elem;
});

result[0].jackets //"jackets"

Answer 2

您需要确保tbody元素是table元素的子元素。

然后，您可以执行以下操作：

 var arr = $("#product-list tr").get().map(function (tr) { return $('input', tr).get().reduce(function (obj, input) { obj[input.name.replace(/\\[.*\\]/,'')] = input.value; return obj; }, {}); }); console.log(JSON.stringify(arr, null, 2)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="products"> <table> <tbody id="product-list"> <tr> <td><input type="hidden" name="type[]" value="jackets">jackets</td> <td><input type="hidden" name="name[]" value="test1">test1</td> <td><input type="hidden" name="color[]" value="red">red</td><td> <input type="hidden" name="size[]" value="S">S</td> </tr> <tr> <td><input type="hidden" name="type[]" value="jackets">jackets</td> <td><input type="hidden" name="name[]" value="test2">test2</td> <td><input type="hidden" name="color[]" value="blue">blue</td> <td><input type="hidden" name="size[]" value="S">S</td> </tr> </tbody> </table> </form> 

get()方法会将jQuery集合转换为纯数组，并且第一次出现时，它将是2个元素组成的数组，因为有两个tr元素。

第二个数组将两次返回一个包含4个元素的数组，因为两个tr元素都有4个input元素。 但是，将这4个元素组成的数组通过reduce转换为具有4个属性的对象，该对象将迭代这些inputs并将每个inputs的属性添加到以空输入（ {} ）开始的对象。

调用replace(/\\[.*\\]/,'')将从名称属性值中删除括号中的部分。