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

Posted 2023-02-22

【中文标题】javascript/jQuery：如何动态地将属性值转换为对象键？ [复制]

【英文标题】：javascript/jQuery: how do you dynamically turn attribute values into object keys? [duplicate]

【发布时间】：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做的输入元素

【参考方案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 对象（“视图模型”）。