将数据从表单级联到JSON对象中

Question

我正在尝试构建一个“表单生成器”，您可以在其中将子字段添加到字段中，并将子字段添加到这些子字段中， 依此类推 。我已经完成了该部分的工作并将输出的html我粘贴到了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;
        }

我能够接近此的最佳方法是摆弄小提琴 -但这仅允许我放下id ，而不能将其格式化为所需的格式。

做这个的最好方式是什么？

Answer 1

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