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

Question

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

4

可能是重复的问题：
使用jQuery将表单数据转换为JS对象

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

<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}
                        ]
}

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

有没有人有任何想法如何处理这个问题？

- cybermotron

整个页面只需要一个。 - cybermotron

我可以想象使用jQuery来解决这个问题...但是如果只使用纯JavaScript可能会有更大的问题（因为你需要一个选择器引擎来选择那些元素）。 - Šime Vidas

我很高兴使用jQuery，我的应用程序已经充满了它！ - cybermotron

https://dev59.com/f3M_5IYBdhLWcg3w4nfb - zerodin

@cybermotron 考虑将 jQuery 标签添加到你的问题中。 - Šime Vidas

显示剩余5条评论

3个回答

0

类似这样：

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 的对象。

有帮助吗？

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

- xj9

这两个例子都出现了错误... jQuery 的那个会出现 "Uncaught SyntaxError: Unexpected token ("，在函数的第三行... 原生 JS 的那个会出现 "Uncaught SyntaxError: Unexpected token ["，在 for 循环的第三行。 - cybermotron

0

你可以使用一些JS MVC / MVVC库来完成这个任务。例如，Knockout。我自己还没有使用过它，但是从一瞥之间看起来很不错。你可以定义JSON对象和HTML表单字段之间的映射，库会监视表单字段并更新JSON对象（一个“视图模型”）。

- Pēteris Caune

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mway · Accepted Answer

类似这样：

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：修改了代码，使您的哈希键变量不会被视为字符串。