將數據從表單級聯到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示例。