为 API 调用 JSON 序列化一个表单（动态输入）

Question

我正在尝试使用一些 js 将 Web 表单序列化为 json。我找到了示例，但不完全是我要找的。

在输入中我有这个表格

我在whosebug.com上发现这个功能几乎可以满足我的需要，但我无法最终确定()

function formArrayConverter(formArray){
    var obj = {};
    $.each(formArray, function(i, pair){
        var cObj = obj, pObj, cpName;
        $.each(pair.name.split("."), function(i, pName){
            pObj = cObj;
            cpName = pName;
            cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
        });
        pObj[cpName] = pair.value;
    });
    return obj;
}


// I transform the form into a table with javascript
let myFormArray = $('#exampleForm').serializeArray();
console.log('the array:');
console.log(myFormArray);

// After calling the function I get this result in console
console.log('formArrayConverter(myFormArray) result : ');
console.log(formArrayConverter(myFormArray));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="exampleForm">
    <input type="hidden" name="Id" value="32468">
    <input type="datetime" name="EffectiveDate" value="2022-06-03">
    <input type="number" class="form-control amountCategorie"  name="TotalAmount" value="57.99">
    <input type="text" name="Manager.Name" value="ManagerName">
    <input type="text" name="Manager.Level" value="10">
    <!-- variable number of inputs --> 
    <input type="text" value="Phone" name="Categories[0].Name">
    <input type="number" name="Categories[0].Amount" value="47.99">
    <input type="text" value="Tax" name="Categories[1].Name">
    <input type="number" name="Categories[1].Amount" value="10.00">
    <!-- ... -->
</form>

** $('#exampleForm').serializeArray() return 在调用函数“formArrayConverter()”之前 **

[
  {
    "name": "Id", "value": "32468"
  },
  {
    "name": "EffectiveDate", "value": "2022-06-03"
  },
  {
    "name": "TotalAmount", "value": "57.99"
  },
  {
    "name": "Manager.Name", "value": "ManagerName"
  },
  {
    "name": "Manager.Level", "value": "10"
  },
  {
    "name": "Categories[0].Name", "value": "Phone"
  },
  {
    "name": "Categories[0].Amount", "value": "47.99"
  },
  {
    "name": "Categories[1].Name", "value": "Tax"
  },
  {
    "name": "Categories[1].Amount", "value": "10.00"
  }
]

调用函数“formArrayConverter”后我得到了这个结果

{
    "Id": "32468",
    "EffectiveDate": "2022-06-03",
    "TotalAmount": "57.99",
    "Manager": {
        "Name": "ManagerName",
        "Level": "10"
    },
    "Categories[0]": {
        "Name": "Phone",
        "Amount": "47.99"
    },
    "Categories[1]": {
        "Name": "Tax",
        "Amount": "10.00"
    }
}

我的问题来自类别数组的序列化。我希望我的 API 工作电话：

{
    "Id": "32468",
    "EffectiveDate": "2022-06-03",
    "TotalAmount": "57.99",
    "Manager": {
        "Name": "ManagerName",
        "Level": "10"
    },
    "Categories": [
        {
            "Name": "Phone",
            "Amount": "47.99"
        },
        {
            "Name": "Tax",
            "Amount": "10.00"
        }
    ]
}

我的案例就是一个简单的例子。我有几个电话要打，我想做一个通用功能。谢谢

Answer 1

试试这个

var d= formArrayConverter(myFormArray);

for (const key in d) {
  var len = key.indexOf("[");
  if (len > 0) {
    var arrName = key.substring(0, len);
    if (!d.hasOwnProperty(arrName)) {
      d[arrName] = [];
    }
    d[arrName].push(d[key]);
    delete d[key];
  }
}
console.log(JSON.stringify(d);

如果适合您，您可以将此代码移到 formArrayConverter 中。

为 API 调用 JSON 序列化一个表单（动态输入）

serialize a form (with inputs dynamic) for API call with JSON

javascript

jquery

json

serialization