Question

我正在努力建立一个表单构建器＆＃39;你可以在哪里添加子字段到字段，子字段添加到那些子字段等。我有那部分工作和输出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，而不是将其格式化为我需要的格式。< / p>

这样做的最佳方式是什么？

Answer 1

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

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

1 个答案: