Question

可能重复：
Convert form data to JS object with jQuery

这是我的问题，我有一大堆看起来像这样的元素......

<input type="email" id="email" data-item="email" data-key="contact_details"/>
<input type="tel" id="mobileNo" data-item="mobileNo" data-key="contact_details"/>

<input type="text" id="sleeve_length" data-item="sleeve_length" data-key="measurements"/>
<input type="text" id="inseam" data-item="inseam" data-key="measurements"/>

每个元素都有一个'data-key'和'data-item'，它对应于我试图将它们变成json形式，看起来像这样...

{
    "measurements" : {"sleeve_length" : value, "inseam" : value},

当每个数据项都是唯一的时......就像它不是......

    "contact_details" : [
                             {"email" : value, "mobileNo" : value},
                             {"email" : value, "mobileNo" : value}
                        ]
}

现在因为我的网络应用程序涉及多种形式，我需要一种方法将上面的标记动态转换为这些json字符串...但我似乎无法绕过它！

有没有人知道如何处理这个问题？

Answer 1

像这样：

var json = {};
$('#path .to input').each(function(e) {
    var key = $(this).attr('data-key');
    var param = $(this).attr('data-item');
    var obj = {};
    obj[param] = $(this).val();

    // If we already have a record...
    if(key in json) {
        // If it's not an array, make it an array
        if(typeof(json[key].push) != 'function')
            json[key] = [ json[key] ];
        // Toss it on the pile
        json[key].push(obj);
    } else {
        // There's only 1 thus far, keep it k/v
        json[key] = obj;
    }
});

等。相当基本的，关键点是测试你正在使用的密钥是否存在，如果存在，将其转换为数组。

编辑：这是未经测试的，但应该有效。

编辑2：修改后的代码，因此您的哈希密钥变量不会被视为字符串。

Answer 2

类似的东西：

var myJson = {};
// jQuery
$('input').each(function () {
    myJson[$(this).attr('data-key')][$(this).attr('data-value')] = $(this).val();
});
// Native JS
var els = document.getElementsByTagName('input');
for (var i = 0, l = els.length; i < l; i += 1) {
    myJson[els[i]['data-key']][els[i]['data-value']] = els[i].value;
}

应该做的伎俩。它遍历页面上的所有输入元素，并将每个元素中找到的数据放入具有键data-key的对象中，并将其设置为等于具有键data-value的对象和值{输入元素的{1}}。

有用吗？

编辑：这样更好吗？我不知道我在想什么。

Answer 3

你可以让一些JS MVC / MVVC库为你做这件事。例如，Knockout。我自己还没有用过它，但是从一眼就看出它看起来很整洁。您可以定义JSON对象和HTML表单字段之间的映射，并且库将监视表单字段并更新JSON对象（“视图模型”）。

javascript / jQuery：如何动态地将属性值转换为对象键？

3 个答案: