Javascript 带有JSON对象分层字段的HTML表单

比如说。我们有以下表格：

<form id="to-object">
<input name="data[zero_key]" value="It`s too simple" />
<input name="data[first_key][value]" value="It`s simple too" />
<input name="data[second_key][]" value="Push me" />
<input name="data[second_key][]" value="Push me please" />
<input name="data[next_key][0][type]" value="I don`t wanna be object with key 0. " />
<input name="data[next_key][0][number]" value="I`m array!!!" />
</form>

我有什么：

(function($) {
    $.fn.convertFormDataToObject = function(){

        var extractFieldNames = function(fieldName, expression, keepFirstElement)
        {

            expression = expression || /([^\]\[]+)/g;
            keepFirstElement = keepFirstElement || false;

            var elements = [];

            while((searchResult = expression.exec(fieldName)))
            {
                    elements.push(searchResult[0]);

            }

            if (!keepFirstElement && elements.length > 0) elements.shift();

            return elements;
        }

        var attachProperties = function(target, properties, value)
        {

            var currentTarget = target;
            var propertiesNum = properties.length;
            var lastIndex = propertiesNum - 1;
            for (var i = 0; i < propertiesNum; ++i)

            {
                currentProperty = properties[i];

                if(currentProperty == ""){
                    var intKey = Math.floor(Math.random() * (99 - 1)) + 1;
                    currentProperty = intKey.toString();
                } else if(!isNaN(currentProperty)) {
                    currentProperty = [parseInt(currentProperty)];
                } else {
                    currentProperty = properties[i];
                }

                if (currentTarget[currentProperty] === undefined)
                {
                    currentTarget[currentProperty] = (i === lastIndex) ? value : {};                    }
                                    currentTarget = currentTarget[currentProperty];
            }
        }

        var convertFormDataToObject = function(form) {
                var currentField = null;
            var currentProperties = null;
                // result of this function
            var data = {};
            // get array of fields that exist in this form
            var fields = form.serializeArray();
            for (var i = 0; i < fields.length; ++i)
            { currentField = fields[i];
                // extract field names
                currentProperties = extractFieldNames(currentField.name);
                // add new fields to our data object
                attachProperties(data, currentProperties, currentField.value);
            }
            return data;
        }
        var form = $(this);
        var data = convertFormDataToObject(form);
        return data;
    };
})(jQuery);

（函数（$）{
$.fn.convertFormDataToObject=函数（）{
var extractFieldNames=函数（字段名、表达式、keepFirstElement）
{
表达式=表达式| |/（[^\]\[]+）/g；
keepFirstElement=keepFirstElement | | false；
var元素=[]；
while（（searchResult=expression.exec（fieldName）））
{
元素。推送（搜索结果[0]）；
}
如果（！keepFirstElement&&elements.length>0）elements.shift（）；
返回元素；
}
var attachProperties=函数（目标、属性、值）
{
var currentTarget=目标；
var propertiesNum=properties.length；
var lastIndex=propertiesNum-1；
对于（变量i=0；i

正如您在本示例中所看到的，我使用随机整数生成器来解决

[]

之间的空白问题。这是一个问题，但不是关键。关键的是，我无法解决阵列生成的问题。此脚本将name属性中的所有键添加为对象的键，但它给出了错误的对象。它不使用带有对象的数组，而是使用键“0”、“1”等来指定对象。例如，

“0”：{}，“1”：{}

而不是

[{}，{}]

---

如果你知道如何用JS修复它，我将非常感谢你的帮助

您可以大大降低代码的复杂性，请尝试以下方法：

const finalObj=[…document.querySelector（'form'）.children].reduce（（objSoFar，child）=>{
const value=child.value；
让allKeys=child.name.slice（4.split）（']['）；
allKeys[0]=allKeys[0]。切片（1）；
const lastKeyIndex=allKeys.length-1；
allKeys[lastKeyIndex]=allKeys[lastKeyIndex]。切片（0，allKeys[lastKeyIndex]。长度-1）；
//现在：例如“data[next_key][0][number]”有所有键[“next_key”，“0”，“number”]
设refObj=objSoFar；
while（allKeys.length>1）{
如果（！refObj[allKeys[0]]）{
如果（所有键[1]==''| |/^\d+$/.test（所有键[1]）REBOJ[所有键[0]]=[]；
else-refObj[allkey[0]]={}；
}
refObj=refObj[allKeys[0]]；
allKeys=allKeys.slice（1）；
}
const lastKey=allkey[0]；
如果（lastKey==''）重新绑定推送（值）；
else refObj[lastKey]=值；
返回objSoFar；
}, {});
console.log（finalObj）；
const desiredSerializedResult='{“零键”：“太简单了”，“第一键”：{“值”：“太简单了”}，“第二键”：[“推我”，“请推我”]，“下一键”：[{“类型”：“我不想成为键为0的对象”，“数字”：“我是数组！！！”}]；
if（JSON.stringify（finalObj）==desiredSerializedResult）console.log（'Matches desiredSerializedResult'）；

当决定值应该是数组、对象还是字符串时，逻辑应该是什么。如果

name

是这样的

data[cars][

我理解值应该被推送到数组命名的cars。例如

{“cars”：[“AUDI”，“BMW”]}

如果

name

是这样的

data[cars][[BMW][model]

，输出应该是这样的

{“cars”：[{“bmw”：{“model”：“x10”}}}

。

name

使用这种结构的结果应该是一样的：

data[cars][0][bmw][model]

@NenadVracar，谢谢你的帮助！非常感谢你的帮助！但是如何修复这部分

“next_key”：{“0”：{“type”：“我不想成为键为0的对象。”，“数字”：“我是数组！！！”}

修复了它，只需测试一行中的下一个键是否是数字（除了一个空字符串之外），以决定是推送数组还是推送对象您是天才！！！））现在唯一的问题是使用“选择”、多个“选择”和“文本区域”即可“元素…我已将选择器更改为

document.querySelector（'form'）.getElementsByTagName（“输入”、“选择”、“文本区域”）

，并添加额外的验证（例如：

if（child.tagName=='select'）{const value=child.options[child.selectedIndex].value；}

），但它不起作用……也许我需要在其他地方进行验证？”？

(function($) {
    $.fn.convertFormDataToObject = function(){

        var extractFieldNames = function(fieldName, expression, keepFirstElement)
        {

            expression = expression || /([^\]\[]+)/g;
            keepFirstElement = keepFirstElement || false;

            var elements = [];

            while((searchResult = expression.exec(fieldName)))
            {
                    elements.push(searchResult[0]);

            }

            if (!keepFirstElement && elements.length > 0) elements.shift();

            return elements;
        }

        var attachProperties = function(target, properties, value)
        {

            var currentTarget = target;
            var propertiesNum = properties.length;
            var lastIndex = propertiesNum - 1;
            for (var i = 0; i < propertiesNum; ++i)

            {
                currentProperty = properties[i];

                if(currentProperty == ""){
                    var intKey = Math.floor(Math.random() * (99 - 1)) + 1;
                    currentProperty = intKey.toString();
                } else if(!isNaN(currentProperty)) {
                    currentProperty = [parseInt(currentProperty)];
                } else {
                    currentProperty = properties[i];
                }

                if (currentTarget[currentProperty] === undefined)
                {
                    currentTarget[currentProperty] = (i === lastIndex) ? value : {};                    }
                                    currentTarget = currentTarget[currentProperty];
            }
        }

        var convertFormDataToObject = function(form) {
                var currentField = null;
            var currentProperties = null;
                // result of this function
            var data = {};
            // get array of fields that exist in this form
            var fields = form.serializeArray();
            for (var i = 0; i < fields.length; ++i)
            { currentField = fields[i];
                // extract field names
                currentProperties = extractFieldNames(currentField.name);
                // add new fields to our data object
                attachProperties(data, currentProperties, currentField.value);
            }
            return data;
        }
        var form = $(this);
        var data = convertFormDataToObject(form);
        return data;
    };
})(jQuery);