Question

我正在努力将一组输入动态转换为多维对象以传入ajax调用。

假设我有一个人，有多个地址。我的字段目前看起来像这样：

<input name='Person[name]' value='Bradley'/>
<input name='Person[addresses][home]' value='123 Anywhere Drive.'/>
<input name='Person[addresses][work]' value='456 anywhere Road.'/>

如何将我的字段转换为如下所示的ab对象：

Person :
{
    name: 'Bradley',
    addresses:
    {
        home: '123 Anywhere Drive.',
        work: '456 anywhere Road.'
    }
}

我需要动态地执行此操作（无论提供的输入如何，函数都需要工作）并在N深度工作。

（注：jQuery可用）。

Answer 1

http://jsfiddle.net/w4Wqh/1/

老实说，我认为在正则表达式中有一种方法可以做到这一点..但我无法弄明白。所以，这是一个丑陋的字符串操作。无论哪种方式，我认为这应该让你走上正确的轨道：

function serialize () {
    var serialized = {};
    $("[name]").each(function () {
        var name = $(this).attr('name');
        var value = $(this).val();

        var nameBits = name.split('[');
        var previousRef = serialized;
        for(var i = 0, l = nameBits.length; i < l;  i++) {
            var nameBit = nameBits[i].replace(']', '');
            if(!previousRef[nameBit]) {
                previousRef[nameBit] = {};
            }
            if(i != nameBits.length - 1) {
                previousRef = previousRef[nameBit];
            } else if(i == nameBits.length - 1) {
                previousRef[nameBit] = value;
            }
        }
    });
    return serialized;
}

console.log(serialize());

快速解释。这只是用'name'属性抓取任何东西，然后迭代它们。对于每次迭代，它都会抓取名称并将其拆分为“[”。这基本上可以让您了解物品放置的距离。所以，对于Person [地址] [工作]，你会得到Person，地址]，工作]。

然后，有一个棘手的部分。由于对象总是通过引用传递，我们可以看到序列化变量中是否包含“Person”。如果没有，它会添加它，并将值设置为空对象..它通用，足以用于存储更多内容，或者在必要时替换。如果没有我们需要经历的更多级别，它只需要获取元素的值并将其分配给它具有的引用。否则，代码会抓取对其刚刚创建的内容的引用，并再次循环，执行相同的操作。所以，对于Person [地址] [工作] ..

serialized.Person存在吗？编号设置serialized.Person到{}。这不是循环的结束，将对serialized.Person的引用存储为previousRef。
previousRef.addresses是否存在？（serialized.Person.addresses）编号。将previousRef.addresses设置为{}。这不是循环的结束，将previousRef.addresses的存储引用存储为previousRef。
previousRef.work是否存在？（serialized.Person.addresses.work）编号。将previousRef.work设置为{}。 <强>等待即可。这是循环的结束。将previousRef.work设置为元素中的值。

如何将表单字段动态转换为多维js对象？

1 个答案: