从表单获取级联数据到 JSON 对象

Question

我正在尝试构建一个“表单构建器”，您可以在其中将子字段添加到字段，并将子字段添加到这些子字段等。我的那部分工作和输出 html 我有pasted here on pastebin

看起来像：

我需要把数据变成这种格式：

var form_structure = {
iGA2cXN3XXdmr1F: {
    title: "Field 1",
    help: "",
    placeholder: "",
    type: "multi-select",
    options: {"123QWE": "Opt 1", "ASDZXC": "Opt 2", "ASDQWE": "Opt 3"},
    subfields: {
        m8r32skADKsQwNt: {
            title: "Field 1.1",
            help: "",
            placeholder: "",
            type: "text",
            options: []
        },
        m8r32skADKsQwNt: {
            title: "Field 1.2",
            help: "",
            placeholder: "",
            type: "text",
            options: []
        },
        m8r32skADKsQwNt: {
            title: "Field 1.3",
            help: "",
            placeholder: "",
            type: "text",
            options: [],
            subfields: {
                m8r32skADKsQwNt: {
                    title: "Field 1.3.1",
                    help: "",
                    placeholder: "",
                    type: "text",
                    options: []
                }
            }
        }
    }
},
aBvXXN3XXdmr1F: {
    title: "Field 2",
    help: "",
    placeholder: "",
    type: "multi-select",
    options: {"123QWE": "Opt 1", "ASDZXC": "Opt 2", "ASDQWE": "Opt 3"},
    subfields: {
        m8r32skADKsQwNt: {
            title: "Field 2.1",
            help: "",
            placeholder: "",
            type: "text",
            options: []
        }
    }
}
};

我试过了（抱歉格式错误）：

function buildRequestStringData(form) {
            var select              = form.find('select'),
                    input           = form.find('input'),
                    options_arr     = [],
                    obj             = {},
                    requestString   = '{';

            for (var i = 0; i < select.length; i++) {

                if(typeof $(select[i]).data('parentid') != 'undefined')     {
                    // has parent
                    if($(select[i]).data('parentid') !=   $(select[i]).data('mainid')) {
                        requestString += '"' +     $(input[i]).data('mainid') + '":"' +  JSON.stringify(buildRequestStringData()) + '",';
                    }
                } else {
                    // does not have parent
                    requestString += '"' + $(select[i]).attr('name') + '": "' +$(select[i]).val() + '",';
                }
            }
//                if (select.length > 0) {
//                    requestString = requestString.substring(0,     requestString.length - 1);
//                }
            for (var i = 0; i < input.length; i++) {
//                    if ($(input[i]).attr('type') !== 'checkbox') {



                    requestString += '"' + $(input[i]).attr('name') + '":"' + $(input[i]).val() + '",';
//                    } else {
//                        if ($(input[i]).attr('checked')) {
//                            requestString += '"' +     $(input[i]).attr('name') +'":"' + $(input[i]).val() +'",';
//                        }
//                    }
            }
            if (input.length > 0) {
                requestString = requestString.substring(0, requestString.length - 1);
            }
            requestString += '}]';
            return requestString;
        }

我能够接近这一点的最佳方式是使用this fiddle - 但这只允许我将id 放下，并且不会将其格式化为我需要的格式。

最好的方法是什么？

Answer 1

我认为你在正确的轨道上。查看是否可以将 HTML 嵌套在 JSON 所需的相同结构中，然后在收集每个项目的详细信息时，沿着 DOM 树向上抓取每个父级的 id 直到到达表单，然后创建/附加到您找到的数据的嵌套 JSON 对象。如果这还不够描述性，我会修改答案以包含 html 和 js 示例。