如何基于JavaScript中的输入名称创建表单输入值的嵌套对象（JSON）？

//假设表格如下所示

 <form id="myform">
      <input name="foo" value="parent"/>
      <input name="foo.cat.bar" value="child1"/>
      <input name="foo.cat.biz" value="child2"/>
      <input name="foo.cat.biz.dog.bar" value="child3"/>
  </form>

---

您可以使用jQuery并使用serializeArray方法，如var jsonData=$'form'.serializeArray；：

它与示例对象不匹配，但符合您的问题要求

一旦数组中有了字段，就可以随心所欲地操纵对象。我无法完全理解从表单名称属性中如何获得该对象的逻辑，因此我甚至无法尝试映射它

函数序列化形式 { var jsonData=$'form'。序列化数组； var jsonString=JSON.stringifyjsonData； $'result'.htmljsonString； }

---

您可以使用jQuery并使用serializeArray方法，如var jsonData=$'form'.serializeArray；：

它与示例对象不匹配，但符合您的问题要求

一旦数组中有了字段，就可以随心所欲地操纵对象。我无法完全理解从表单名称属性中如何获得该对象的逻辑，因此我甚至无法尝试映射它

函数序列化形式 { var jsonData=$'form'。序列化数组； var jsonString=JSON.stringifyjsonData； $'result'.htmljsonString； }

---

给你。我在评论中加入了一个解释

function getFormData() {
    /* return nested array combined
       into groups of two. See question @ 
       https://stackoverflow.com/a/31352555/4746328 */
    function groupIntoPairs(arr) {
        var temp = arr.slice();
        var out = [];

        while (temp.length) {
            out.push(temp.splice(0,2));
        }

        return out;
    }

    /* create a storage object */
    var data = {},
    /* get 'input' elements as an array */
    inputs = [].slice.call(document.getElementById('myform').querySelectorAll('input')),
    /* additional variables */
    name, hold, splits, L, dKey;

    /* loop through input elements */
    inputs.forEach(function(n) {
        name = n.name;

        /* for holding key strings */
        hold = '';

        /* split the 'name' at '.'
           and group into pairs */ 
        splits = groupIntoPairs( name.split('.') );

        /* index of last item in 'splits' */
        L = splits.length - 1;

        /* if 'splits' has only one
           item add the name-value pair
           to 'data' straight away */
        if (L === 0) {
            data[name] = n.value;
        } else {
            /* loop 'splits' to create keys */
            splits.forEach(function(x, i) {
                /* combine key strings until
                   last item in 'splits' */
                if (i !== L) hold += '.' + x.join('.');
            });

            /* define the key */
            dKey = hold.slice(1);

            /* create 'data[dKey]' Object if
               it doesn't exist or use it
               again if it does */
            data[dKey] = data[dKey] || {};

            /* add last item in 'splits' as 
               key for 'data[dKey]' and 
               assign current n.value */
            data[dKey][splits[L][0]] = n.value;                
        }
    });
    /* return 'data' object */
    return data;
}

console.log('data:', JSON.stringify(getFormData(), null, 4));
/* => data: {
    "foo": "parent",
    "foo.cat": {
        "bar": "child1",
        "biz": "child2"
    },
    "foo.cat.biz.dog": {
        "bar": "child3"
    }
}
*/

---

希望有帮助。

给你。我在评论中加入了一个解释

function getFormData() {
    /* return nested array combined
       into groups of two. See question @ 
       https://stackoverflow.com/a/31352555/4746328 */
    function groupIntoPairs(arr) {
        var temp = arr.slice();
        var out = [];

        while (temp.length) {
            out.push(temp.splice(0,2));
        }

        return out;
    }

    /* create a storage object */
    var data = {},
    /* get 'input' elements as an array */
    inputs = [].slice.call(document.getElementById('myform').querySelectorAll('input')),
    /* additional variables */
    name, hold, splits, L, dKey;

    /* loop through input elements */
    inputs.forEach(function(n) {
        name = n.name;

        /* for holding key strings */
        hold = '';

        /* split the 'name' at '.'
           and group into pairs */ 
        splits = groupIntoPairs( name.split('.') );

        /* index of last item in 'splits' */
        L = splits.length - 1;

        /* if 'splits' has only one
           item add the name-value pair
           to 'data' straight away */
        if (L === 0) {
            data[name] = n.value;
        } else {
            /* loop 'splits' to create keys */
            splits.forEach(function(x, i) {
                /* combine key strings until
                   last item in 'splits' */
                if (i !== L) hold += '.' + x.join('.');
            });

            /* define the key */
            dKey = hold.slice(1);

            /* create 'data[dKey]' Object if
               it doesn't exist or use it
               again if it does */
            data[dKey] = data[dKey] || {};

            /* add last item in 'splits' as 
               key for 'data[dKey]' and 
               assign current n.value */
            data[dKey][splits[L][0]] = n.value;                
        }
    });
    /* return 'data' object */
    return data;
}

console.log('data:', JSON.stringify(getFormData(), null, 4));
/* => data: {
    "foo": "parent",
    "foo.cat": {
        "bar": "child1",
        "biz": "child2"
    },
    "foo.cat.biz.dog": {
        "bar": "child3"
    }
}
*/

---

---

希望能有所帮助。

到目前为止，您自己做了哪些尝试？如果您在提交表单时想要对象，可以从名称字段中创建一个嵌套对象，并用点分割来嵌套数据。或者，您应该使用一个框架来实现这一点。您想要的输出似乎有点不一致。为什么最后一个嵌套对象附加到属性foo.cat.biz.dog而不是biz.dog？我正在考虑使用多个对象，然后根据条件，如果名称在最后一个元素之前相同，则将值分配给新对象。最后，将对象相互推入。然而，这是一种非常硬的代码方法，听起来不像是好的编程。我现在想不出其他东西。到目前为止，您自己尝试了什么？如果您在提交表单时想要对象，可以从名称字段中创建一个嵌套对象，并用点分隔以嵌套数据。或者，您应该使用框架来实现这一点。您想要的输出似乎有点不一致。为什么最后一个嵌套对象附加到属性foo.cat.biz.dog而不是biz.dog？我正在考虑使用多个对象，然后根据条件，如果名称在最后一个元素之前相同，则将值分配给新对象。最后，将对象相互推入。然而，这是一种非常硬的代码方法，听起来不像是好的编程。我现在想不出其他东西。它与您的示例不匹配，但它符合您的问题要求-示例构成了问题的一部分，问题的前几句话也询问如何创建嵌套对象，而且jQuery标记不仅没有显示标题，而且显式显示vanilla JavaScript。明白，但是，正如我所说的，我甚至不能遵循从表单输入字段获取该对象的逻辑。一旦你有了一个数组，你就可以随心所欲地映射它。谢谢你的解决方案。然而，我正在寻找一种简单的JavaScript方法，而不是一个库。我举了一个例子。其实质是基于输入名称创建表单输入值的嵌套对象。为什么要急于否决一个问题呢？添加了Vanilla实现，但是表单元素名称对于您的要求是无效的。面试问题的重点可能是深入了解您的思维过程以及您将如何获得解决方案。它与您的样本不匹配，但它符合您的问题要求-样本构成问题的一部分，并且问题的前几个词询问如何创建嵌套对象，不仅jQuery标记没有显示标题，标题明确地说是vanilla JavaScript.Understand，但正如我所说的，我甚至无法理解如何从表单输入字段获取该对象的逻辑。一旦你有了一个数组，你就可以随心所欲地映射它。谢谢你的解决方案。然而，我正在寻找一种简单的JavaScript方法，而不是一个库。我举了一个例子。其实质是基于输入名称创建表单输入值的嵌套对象。为什么要急于否决一个问题呢？添加了Vanilla实现，但是表单元素名称对于您的要求是无效的。面试问题的重点可能是深入了解你的思维过程，以及你将如何获得解决方案。如果输入与复选框列表和单选按钮共享相同的名称，这是行不通的

---

s一个值将丢失。@AlexanderHiggins确实如此，但它使用问题中提供的特定格式，示例返回请求的JSON输出；如果输入与复选框列表和单选按钮共享相同的名称，则此操作无效。一个值将丢失。@AlexanderHiggins确实如此，但它使用问题中提供的特定格式，示例返回请求的JSON输出；