Get cascading data from form into JSON object

Question

I am trying to build a 'form builder' where you can add sub-fields to fields, and sub-fields to those sub-fields, etc. I have that part working and the output html I have pasted here on pastebin

Which looks like:

I need to get the data into this format:

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: []
        }
    }
}
};

I have tried (sorry for the bad formatting):

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;
        }

The best way I have been able to be close to this is on this fiddle - but that only allows me to put the id down, and does not format it into the format I need.

What is the best way to do this?

Answer 1

I think you're on the right track. See if you can nest your HTML in the same structure you want for your JSON, then when harvesting the details for each item, walk up the DOM tree grabbing each parent's id until you get to the form, and then create / append to the nested JSON object the data you find. If this isn't descriptive enough, I'll mod the answer to include html and js examples.