javascript/jQuery：如何动态地将属性值转换为对象键？ [复制]答案

【问题标题】：javascript/jQuery: how do you dynamically turn attribute values into object keys? [duplicate]javascript/jQuery：如何动态地将属性值转换为对象键？ [复制]
【发布时间】：2011-04-30 22:39:44
【问题描述】：

可能重复：
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"/>

每个元素都有一个“数据键”和“数据项”，它们对应于我试图将它们转换成的 json 形式，看起来像这样......

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

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

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

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

有人知道我该如何处理吗？

【问题讨论】：

您需要每组一个 JSON 对象还是整个页面一个？
一个用于整个页面。
我可以想象一个在 jQuery 中的解决方案......在这里只使用纯 JavaScript 可能是一个更大的问题（因为你需要一个选择器引擎来选择这些元素）
我很高兴使用 jQuery，我的应用已经充满了它！
@Sime：你只需要选择你可以用getElementsByTagNameWorks on all browsers做的输入元素

标签： javascript arrays json dom attributes

【解决方案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：修改代码，使您的哈希键变量不会以字符串形式出现。

【讨论】：

哇...这肯定让我更接近...唯一的事情是它输出像这样 {"_id":"contact_1288116316143","firstname":"John","lastname": "Smith","contact_details":[{"param":""},{"param":"sadfsadf"},{"param":"fasdfsad"},{"param":"sadfsad"},{"参数":"asdfasdfsadfsa"}],"job_description":[{"param":""},{"param":""}],"fee":[{"param":""},{"param ":""}],"measurements":[{"param":""},{"param":""},{"param":""},{"param":""},{"参数":""},{"参数":""},{"参数":""},{"参数":""},{"参数":""},{"参数":"" }]}
更新了代码 - 抱歉，我的目光短浅。 :) 试一试，让我知道它是否按预期工作。
现在它抛出一个错误“Uncaught SyntaxError: Unexpected token (". on this line ... json[key] = { $(this).attr('data-item'): $ (this).val() }; ... 虽然所有的 '(' 似乎都在正确的位置。
我的错 - 忘记修复初步编辑。现在就来看看吧。
效果几乎完美。唯一的问题是每个键/值都成为它自己的对象，而不是对象内的兄弟姐妹。我刚刚发现了这个令人惊叹的插件“code.google.com/p/form2js”，它完全符合我的要求，并且在我需要更改数据映射时给了我一些额外的回旋余地。非常感谢。你的回答太棒了。

【解决方案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 和值 value 的对象输入元素。

有用吗？

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

【讨论】：

这两个例子都出现了错误...... jquery 一个出现了 "Uncaught SyntaxError: Unexpected token (" ，在函数的第 3 行......原生 js 出现了在 for 循环的第 3 行带有 "Uncaught SyntaxError: Unexpected token [" 。

【解决方案3】：

您可以让一些 JS MVC / MVVC 库为您执行此操作。例如，Knockout。我自己还没有使用它，但乍一看它似乎很整洁。您定义 JSON 对象和 HTML 表单字段之间的映射，该库将监视表单字段并更新 JSON 对象（“视图模型”）。

【讨论】：