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

Posted 2023-03-05

【中文标题】如何在 Javascript 中将表单数组转换为 JSON？ （对象数组）？

【英文标题】：How to convert form arrays to JSON in Javascript? (array of objects)?

【发布时间】：2017-07-22 17:33:26

【问题描述】：

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"

理想情况下，我正在寻找解决方案如何做到这一点，以及学习的逻辑。

【问题讨论】：

***.com/questions/10356370/…查看此链接

【参考方案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"

【讨论】：

嘿，a 来自哪里？是未定义的吗？这也是输出：["name":"type[]","value":"jackets","jackets":"jackets","name":"name[]","value":"test1","test1":"test1","name":"color[]","value":"red","red":"red","name":"size[]","value":"S","S":"S","name":"type[]","value":"jackets","jackets":"jackets","name":"name[]","value":"test2","test2":"test2","name":"color[]","value":"blue","blue":"blue","name":"size[]","value":"S","S":"S"]

啊抱歉！是错字

@sieuPhan a 是 arr

这将生成一个包含 8 个元素而不是 2 个元素的数组，并且 8 个对象中的每一个都具有 2 个或 3 个属性。例如包含 name: test1, value: test1 。

哦 - 我没有意识到它应该只有 2 个元素。会更新。

【参考方案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 并将每个元素的属性添加到以空对象 () 开头的对象中。

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