从动态表单创建嵌套的 JSON

Question

我有一个客户的自定义页面构建器，他们可以通过拖放后端构建自己的 Web 表单。

目前，我可以将数据以 JSON 格式输出，如下所示：

{ 
  "email":"xx@yy.com",
  "geoip_country":"XXYY",
  "geoip_state":"XXYY",
  "geoip_city":"XXYY",
}

但是，我需要按以下格式更改输出，我想从表单中分离出电子邮件字段，并删除嵌套在 dynamic_attributes 部分中的所有其他数据，如下所示：

{
    "email":"xx@yy.com",
    "dynamic_attributes":{
        "geoip_country":"XXYY",
        "geoip_state":"XXYY",
        "geoip_city":"XXYY",
        // all other form fields here.

    },
}

有人能指出我正确的方向吗？ 我对输出 JSON 的经验并不丰富 - 我还应该补充一点，json 是从以下 jQuery 函数创建的：

(function ($) {
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

见小提琴： https : //jsfiddle.net/fish_r/m46zLdo9/3/

谢谢！

Answer 1

试试这个：

 $('#myform').submit(function(e) { e.preventDefault(); var data = $(this).serializeFormJSON(); console.log(data); }); (function ($) { $.fn.serializeFormJSON = function () { var o = {}; var dynamic_attributes = {}; var a = this.serializeArray(); $.each(a, function () { if (this.name =='email') { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } } else { if (dynamic_attributes[this.name]) { if (!dynamic_attributes[this.name].push) { dynamic_attributes[this.name] = [dynamic_attributes[this.name]]; } dynamic_attributes[this.name].push(this.value || ''); } else { dynamic_attributes[this.name] = this.value || ''; } } }); o['dynamic_attributes'] = dynamic_attributes; return o; }; })(jQuery);

 .hidden {opacity:.3}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="POST" id="myform"> <input type="text" name="name" placeholder="name"><br/> <input type="email" name="email" placeholder="Enter your email"><br/> <input type="text" name="address1" placeholder="Enter the first line of your address"><br/> <input type="submit"> </form> <div id="output"></div>

Answer 2

对于将来在类似问题上寻求帮助的任何人，我创建了一个库，通过将每个输入的name属性编写为一系列由“.”连接的子键，允许将表单作为深度嵌套的 JSON 对象发送。 字符。

要导入库：

<script src="https://cdn.jsdelivr.net/npm/deepforms@1.0.0/deepforms.min.js"></script>

使用库制作的示例表单：

<form id = "exampleForm" method = "POST" action = "/submitForm">
    <input type = "text" name = "user.name" value = "testUser">
    <input type = "text" name = "color" value = "blue">
    <input type = "text" name = "color" value = "red">
</form>
<button onclick="document.deepforms.submitDeepForm('exampleForm')">

单击提交按钮后，将生成以下对象并将其作为 JSON 字符串发送：

{
    "user" : {
        "name" : "testUser"
    },
    "color" : ["blue", "red"]
}

JSON 字符串作为名为deepFormJSON的参数的值发送：

deepFormJSON : '{"user":{"name":"testUser"},"color":["blue","red"]}}'

可以将其解析为 JSON 字符串，以便在请求目的地构造一个对象。